border-radius介绍
-
属性值:
border-radius
实际上包含8个值,可以写为border-radius: av bv cv dv \ ah bh ch dh
;具体是由四个属性组成:border-top-left-radius: ah av
:左上角半圆的水平半径和垂直半径
border-top-right-radius: bh bh
:右上角半圆的水平半径和垂直半径
border-bottom-right-radius: ch cv
:右下角半圆的水平半径和垂直半径
border-bottom-left-radius: dh dv
:左下半圆的水平半径和垂直半径 -
border-radius
的百分比的基准是box-sizing: border-box
,也就是说它的基准包含了元素自身的宽度+padding+border,基于上边的例子,如果我们给.circle
添加宽度为10px的border需要变为60px
-
border-radius
有一个大值特性
,即对于一个div,其border-radius
有一个临界最大值使其可以绘制为圆形,即使给定的border-radius
值大于该值,浏览器会采用最小绘制; -
根据上一条,当
border-radius
大于50%时,绘制的图形都是半径相同的圆形;
在线demo演示
border-radius绘制圆形、椭圆、半圆、1/4圆的
通过调整div的宽高及border-radius
的8个属性值,让你直观看到每个分值对生成图形的影响。代码演示截图如下:
圆
- 使用
border-radius
特性; - 代码实现,具体可见jsfiddle.net
样式实现:<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS图形绘制</title> </head> <body> <div class="wrapper"> <div class="circle"></div> </div> </body> </html>
* { margin: 0; padding: 0; } .wrapper { display: flex; width: 200px; height: 200px; background-color: lightblue; } .circle { width: 100px; height: 100px; margin: auto; background-color: #f2f2f2; border-radius: 50%; }
椭圆
简单椭圆与圆无差,直接设置border-radius: 50%
,其实具体的值还可以自己调整;示例参考JSFiddle
半圆
举例:创建一个宽高分别为200px/100px的div块元素,分别设置其border-top-left-radius: 100px 100px
、border-top-right-radius: 100px 100px
,即可得到一个上半圆;具体可以使用上边提供的zaixiandemo调试查看效果
1/4半圆
了解了border-radius的8个分值及特性,绘制半圆同样简单:
创建一个宽高相等的div
,然后设置border-radius: witdh 0 0 0
;这样就可以得到一个1/4圆,方向与非零值位置相关;
跑道
示例参见jsfiddle.net
* {
margin: 0;
padding: 0;
}
.wrapper {
display: flex;
width: 300px;
height: 300px;
background-color: lightblue;
}
.circle {
width: 100px;
height: 200px;
margin: auto;
border: 10px solid brown;
background-color: #f2f2f2;
border-radius: 100px;
}
border
border
属性是四个属性的组合:
border-left
border-right
border-top
border-bottom
-
理解border
首先我们看一个demo, 我们创建一个宽高为100px的div,设置其border为50px;图示如下
我们可以看到,每个方向的border呈现一个梯形; -
在线demo:
为了更加直观地观看border各属性值对图形的影响,我们同样制作了动态demo,支持调整div的宽高以及四个方向border的值;demo具体实现参见codesandbox.io
如果div的宽高变为0,那么每个方向的border将展现为三角形;到这里,相信制作一个三角形就比较容易了,我们可以仅保留 一个方向的颜色,让其他三个方向的颜色均为透明,即可实现一个三角形;
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>react examples</title> <style> * { margin: 0; padding: 0; } .container { width: 400px; height: 400px; background-color: #fbfbfb; display: flex; } .tri { width: 100px; height: 100px; margin: auto; background: powderblue; border-left: 50px solid rgb(156, 113, 113); border-right: 50px solid greenyellow; border-top: 50px solid palegreen; border-bottom: 51px solid peachpuff; } </style> </head> <body> <div id="root"></div> <div class="container"> <div class="tri"></div> </div> </body> </html>
直接三角形
设置div的宽高为0,然后设置border中两个任意相邻的border属性值相等,其中一个设置为透明,即可得到直角三角形。
box-shadow与outline
box-shadow
利用box-shadow
可以绘制多重边框,设置其前三个变量均为0(h-shadow、v-shadow、blur),然后使用spread
为边框宽度;这里需要注意的是默认是外边框的,那么比如hover、点击等在box-shadow
绘制的边框处是无法触发这些动作的;
为了解决该问题,可以设置box-shadow
的第五个变量inset
,使其变为内部阴影;
outline
outline (轮廓)是绘制于元素周围的一条线,
位于边框边缘的外围
,可起到突出元素的作用;
它有三个属性,包括outline-color
、outline-style
、outline-width
;另外,可以设置outline-offset
对边框进行偏移,支持负值;
可以结合W3School的demo理解;