border-前端--易笔记

border-style:[dotted |dashed |double |solid]{1,4}

solid：实线

dotted:点线(点隔开)

dashed：虚线(横杠隔开)

double：双线(3等分边框宽度，显示第一条和第三条)

border-width:[thin |medium |thick |length]{1,4}

thin :细线

medium ：中等线

thick ：粗线

length：像素值(px)

border-color:[color_name |hex_number |rgb_number |transparent]{1,4}

color_name :颜色英文名如：red

hex_number ：十六进制如：#ff00ff

rgb_number ：rgba值如：rgb(0,0,0,0.5)

transparent：设置为透明

注意：

1. 属性值为4个时遵循【上、右、下、左】原则

2. 属性值为3个时遵循【上、(右左)、下】原则

3. 属性值为2个时遵循【(上下)、(右左)】原则

4. 属性值为1个时遵循【(上右下左)】原则

示例代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>border</title>
</head>
<style type="text/css">
#border-image{
    margin:100px;
    width:200px;
    height:200px;
    border-style: double dotted dashed solid;
    border-width:10px thin medium thick;
    border-color:red rgba(0,0,0,5) #ddd transparent;;
}
</style>

<body>
    <p id="border-image"></p>
</body>
</html>

border-image:

列表内容

这里写代码片11

border-radius:

时间：2017/1/19 10:45:00