css圆角边框怎么设置，css圆角边框代码
之前在介绍css盒子模型的时候，大概讲过边框border，边框border是其中一个重要组成部分。本篇将具体介绍边框的属性， border 属性允许您指定元素边框的样式、宽度、颜色及圆角。
CSS 边框样式
border-style 边框样式有以下值：
dotted - 定义点线边框
dashed - 定义虚线边框
solid - 定义实线边框
double - 定义双边框
groove - 定义 3D 坡口边框。
ridge - 定义 3D 脊线边框。
inset - 定义 3D inset 边框。
outset - 定义 3D outset 边框。
none - 定义无边框
hidden - 定义隐藏边框
border-style 属性可以设置一到四个值（用于上边框、右边框、下边框和左边框）。其中3D样式效果取决与边框颜色 border-color 值。
如下实例：
CSS 边框宽度
border-width 属性指定四个边框的宽度。可以将宽度设置为特定大小（以 px、pt、cm、em 等），或者使用以下三个预定义值之一：thin、medium 或 thick。
如下示例：
给不同边框设置宽度：
CSS 边框颜色
border-color 属性用于设置四个边框的颜色，通过以下方式设置颜色：
name - 指定颜色名，比如 "red"
HEX - 指定十六进制值，比如 "#ff0000"
RGB - 指定 RGB 值，比如 "rgb(255,0,0)"
HSL - 指定 HSL 值，比如 "hsl(0, 100%, 50%)"
transparent - 完全透明
注意：如果未边框宽度为0时，即使设置了边框颜色也不会显示。
如下示例：
也可分别给每个边框设置不同颜色：
按不同方向边框单独设置样式、宽度、颜色
还可以按照上、右、下、左的顺序分别设置边框样式、宽度或颜色。如下示例：
以上写法等同于以下简写法，不同之处就是上面的写法对元素边框样式更精细控制：
p { height:100px; /*边框样式*/
border-style: dotted solid dotted solid; /*边框宽度*/
border-width: 2px 5px 10px 20px; /*边框颜色*/
border-color: red rgb(0,255,0) #ff00ff orange;
}更精简的写法
只使用一个border: style、width、color；设置边框样式。
如下示例：
这种写法，缺点就是四个边使用相同的样式、宽度、颜色，所以当要制作特殊的效果时候，就需要使用以上非简写方法。
边框圆角
border-radius 允许你设置元素的四个角的圆角大小。语法如下：
border-radius: 左上 右上 右下 左下；
这4个值定义了一个半径长度，分别表示水平和垂直方向的半径
你可以设置一个值，也可以设置二个或三个。和之前学习padding、margin类似，没有设置的那个值会以它的对角的值为准。比如以下示例：
以上都是圆形的角，水平和垂直方向半径相同，如果水平和垂直方向半径不一样，不就是椭圆了吗？
创建椭圆角，语法如下：
border-radius: 水平方向（左上 右上 右下 左下）/ 垂直方向（左上 右上 右下 左下）；
可以用斜杠设置第二组值。这时，第一组值表示水平半径，第二组值表示垂直半径。第二组值也可以同时设置1到4个值，应用规则与第一组值相同。
如下示例：
现在你会看到，如上图出现不规则边框，是不是很有意思，现在动手试试吧，探索其中的乐趣。
使用边框制作箭头
利用border 制作小三角，非常实用，当把宽度和高度设置为0，看到如下代码：
border-width: 40px; border-color: #F00 #0F0 #00F #0FF; border-style: solid; width: 0px; height: 0px;
此时我们只需要将左边、下边、右边的 border 颜色设置为透明就是我们要的三角形了,如下代码实现倒三角图形：
border-color: #F00 transparent transparent transparent;
效果：
如果要其它方向的三角，同理设置不同方向的颜色为透明就可以了。
一般使用此方法用来制作气泡效果，非常实用，你不妨试试。
总结：
1、边框 border 样式、宽度、颜色。
2、边框简写方法及按方向分别设置。
3、边框圆角分以圆形半径和椭圆半径的角。
4、边框应用实例，制作三角形。
边框在网页中的应用非常广泛，比如按钮样式，气泡效果，三角形等等。
本文地址：IT问答频道 https://www.hkm168.com/itwenda/903408.html，易企推百科一个免费的知识分享平台，本站部分文章来网络分享，本着互联网分享的精神，如有涉及到您的权益，请联系我们删除，谢谢！
相关阅读
