知识往往随时间淡忘,沉心在开发中时间长了,发现好些知识已经又模糊了,一些很好用的属性,其本身就有,却忘了,然后绕个大圈子自己实现了一套,究其原因,还是因为一开始没有掌握牢固和透彻
# 都知道是圆角
border-radius 属性是一个简写属性,用于设置四个 border-*-radius 属性.他用于向 block 级别元素增加圆角
语法
border-radius: 1-4 length|% / 1-4 length|%;
按此顺序设置每个 radii 的四个值.如果省略 bottom-left,则与 top-right 相同.如果省略 bottom-right,则与 top-left 相同.如果省略 top-right,则与 top-left 相同.
# 实现一个圆
在不使用 canvas 和 svg 的情况下,用 border-radius 就能简单实现一个圆
<div>
<p></p>
</div>
div {
width: 100px;
height: 100px;
}
p {
width: 100%;
height: 100%;
background: lightgreen;
border-radius: 50&;
}
为什么定义一层 '多余' 的 <div> ? 居然说我多余,不解释,自己理解去.╭(╯^╰)╮
# 实现一个圆环
给圆加一个边框,然后不绘制圆的背景颜色就好了?是的,就是这样
p {
width: 100%;
height: 100%;
border: solid 3px lightgreen;
border-radius: 50%;
}
什么?你觉得这样宽度超出了原本的宽度?你怎么辣么多问题呢!我想婧婧
box-sizing: border-box; // 规定元素的宽高包含了元素边框的大小
将上述样式加入到 p 的样式中,唉,瘦了一圈,好神奇
给 p 元素增加 box-sizing 属性
# 实现一个 半圆
砍掉一半就好了,不过这时候就不能用 border-radius 的简写形式了
p {
width: 100%;
height: 50%;
background-color: lightgreen;
border-top-left-radius: 50px;
border-top-right-radius: 50px;
}
# 实现一个 小房子 ?
上方一个半圆,下方一个 "半方"
p {
width: 100%;
height: 100%;
border: solid 6px lightgreen;
box-sizing: border-box;
border-top-left-radius: 50%;
border-top-right-radius: 50%;
}
好吧,他更像一个窗户
# 认真点好吧,说好的八个值呢?
如果我们想写一个能直接调用的具有自适应功能的半圆,假如我们直接改成百分比,如下
p {
width: 100%;
height: 50%;
background: lightgreen;
border-top-left-radius: 50%;
border-top-right-radius: 50%;
}
这是什么东西,感觉和上面那个房子好像啊,难道是设置 50% 不行?试试 100%?
我去,怎么还是和上面的一样?先设置一个试试?
border-top-left-radius: 100%;
border-top-right-radius: 100%;
border-top-left-radius: 100%;
/* border-top-right-radius: 100%; */
这是什么鬼,等等,想想,设置了
border-top-left-radius: 100%;
也就是说,圆角按边长的 100% 来设置,长和宽不一样的情况下,圆角的两侧依然严格按边长来设置,难道可以写两个值? 如果我这么写呢?
border-top-left-radius: 50% 100%;
/* border-top-right-radius: 100%; */
咦,居然不报错,真的可以这么写啊!可是谁先谁后呢?左边和上边谁的优先级高呢?唉,border 的定义顺序有奥秘,居然是先 top 再 left,对的,果然是先上边再左边.依照这个规律,增加上右角效果呢?
border-top-left-radius: 50% 100%;
border-top-right-radius: 50% 100%;
半圆实现了!那如果我想简写呢?这样?
border-radius: 50% 100% 0 0;
我去,怎么又坏了,怎么办怎么办! 唉,不对,我这么写的话相当于是:
这明显不对啊,难道简写的时候一条边只能设置一个值?感觉不科学啊!
border-top-left-radius: 50%;
border-top-right-radius: 100%;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
再看看定义?中间那个斜杠是什么鬼,难道!!!
border-radius: 50% 50% 0 0 / 100% 100% 0 0;
哇哦,实现了.祝大家大吉大利新年快乐新婚快乐吉祥如意撒花~
# 拓展
IE 的标签页卡片
p {
width: 100%;
height: 50%;
background: lightgreen;
border-radius: 25% 25% 0 0 / 50% 50% 0 0;
}
google 的标签页卡片
对不起,实现不了,为什么?你咋又辣么多问题呢!
因为 border-radius 是实现圆角的属性,无法实现梯形绝对角度效果,这里补充一下怎么实现梯形
p {
height: 0;
width: 100px;
border-bottom: 50px solid lightgreen;
border-left: 25px solid transparent;
border-right: 25px solid transparent;
}
对角圆角
p {
width: 100%;
height: 50%;
background: lightgreen;
border-radius: 100% 50%/ 0 100%;
}
一片叶子
p {
width: 100%;
height: 50%;
background: lightgreen;
border-radius: 0 100% / 0 100%;
}
# 推荐一个测试网页
来自张鑫旭大牛的测试工具 圆角效果测试
# 后语
利用 border-radius 的八个值进行调节,还能得到很多的漂亮的图形,如果有兴趣,欢迎交流一起进步.另外,我的下一篇文章[利用简单的 CSS 实现各种漂亮的形状] ,如果觉得我的写作对您有帮助,欢迎关注哦.
来源: http://www.jianshu.com/p/3790fdde02a6