border-radius实例2
2024-08-31 10:20:02
一、border-radius 最大值100%
/* border-radius的最大值是100% */
.block {
width: 100px;
height: 100px;
border: 1px solid red;
/* border-radius: 10px 10px 100% 100%; */
border-radius: 10px 10px 200px 200px;
}
二、使用大圆拼凑更多边角效果示例：
注：微信抢红包页面背景效果可以使用这种方式
css代码：
.block {
width: 200px;
height: 200px;
border: 1px solid red;
border-radius: 10px;
margin: 100px 0px 0px 100px;
position: relative;
overflow: hidden;
}
.blocktop {
width: 200%;
height: 200%;
border: 1px solid blue;
border-radius: 50%;
margin-top: -150%;
margin-left: -50%;
background: blue;
position: relative;
overflow: hidden;
}
.blocktop .blockInner {
width: 50%;
height: 25%;
position: absolute;
bottom: 0px;
left: 50%;
transform: translateX(-50%);
}
.blocktop img {
width: 100%;
}
html的结构：
<div class="block">
<div class="blocktop">
<div class="blockInner">
<img src="http://beijing.gongjuji.net/imgdata/small/e6e7b778-0e0e-452f-80aa-f95f94690fab.jpg" alt="">
</div>
</div>
</div>
显示效果：
更多：
最新文章
- 主成分分析（PCA）特征选择算法详解
- C#通过编程方式实现Ping
- C++ 线程类的一个实现
- python 赋值,交换值理解
- java基础学习总结四(控制语句<顺序、选择、循环>、方法)
- 【HDOJ】1969 Pie
- 《Android开发艺术探索》读书笔记 (9) 第9章 四大组件的工作过程
- 第三届蓝桥杯预赛真题_第一题_两种微生物 X 和 Y
- linux下 文件IO 相关
- C#的数据类型总结（2）：decimal ，double，float的区别
- css befroe after 尾类技术器
- 【ASP.NET】Validation 服务器控件
- html字体加大标签与写法介绍
- 封装一个基于NLog+NLog.Mongo的日志记录工具类LogUtil，nloglogutil
- 第六周学习总结-CSS、JavaScript
- 【托业】【新托业TOEIC新题型真题】学习笔记9-题库七+八--P4-5
- jstack，jmap，jstat分别的意义
- n位格雷曼实现
- CURL实现HTTP的GET POST方法
- ORACLE11g中毒恢复