角属性border-radius属性，一个比较简单但用处很大的一个重要css3属性，绘制圆形、圆角矩形 、椭圆形。

言

之前在介绍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、边框应用实例，制作三角形。

边框在网页中的应用非常广泛，比如按钮样式，气泡效果，三角形等等。

感谢关注，祝学习愉快。

上篇：前端入门——css颜色和背景

建企业网站时使用CSS边框圆角是很容易的事，但要设置边框圆角的渐变效果就需要费些功夫了，需要正确理解几个CSS属性的含义，background-origin,background-clip,background-size这几个是必须用到的，调整好性能的数值就可以灵活运用了。

想要实现CSS圆角渐变并匹配内容背景图可以参考以下代码：

<style>
div {
 width: 500px;
 height: 300px;
 margin: 10px;
 padding: 30px;
 border-radius: 50px; /*设置圆角*/
 border:50px solid transparent; /*设置边框颜色透明，确保背景渐变色显示*/
 background-origin:border-box; /*从边框开始背景图*/
 background-clip:padding-box,border-box; /*设置第一个背景和第二个背景的范围*/
 background-size:cover;
 /*由于背景图像不能设置纯色，所以可以使用下面的方式设置纯色*/
 background-image:linear-gradient(#fff, #fff),linear-gradient(#FC0, #F30); 
}
.a1{display:block;height:280px;background-image:url(/images/school.jpg);
background-repeat:no-repeat;background-size:contain;}
</style>

<div>
<span class="a1">边框渐变色从内边框到边框，背景图像单独设置不重复。</span>
</div>

background-origin表示的是背景起始位置，其三个值如下，依次是

border-box 从边框开始；
padding-box(默认) 从内边距开始；
content-box 从内容开始。

background-origin: border-box | padding-box(默认) | content-box

background-clip表示的是背景填充位置，其四个值如下，依次是

border-box(默认) 填充至边框；
padding-box 填充至内边距；
content-box 填充之内容；
text 作为字体前景色。

background-clip: border-box(默认) | padding-box | content-box | text

background-size表示的是背景尺寸，其五个值如下，依次是

contain 将图像扩大至适应最短的边，剩余部分默认重复图像
cover 将图像扩大至适应最长的边，图像可能显示不完整
length 两个值依次设置图像宽和高，未设置则为auto
percentage 两个百分比依次设置图像宽和高，未设置则为auto
auto 默认设置