css 常用边框属性
- 概览
参数 | 释义 |
---|---|
border | u设置边框属性(可以多个) |
border-color | 边框颜色 |
border-style | 边框样式 solid 实线,dotted 点状线,dashed 虚线 |
border-width | 边框粗细 |
border-left-color | 左边框颜色(上下左右均可单独设置) |
border-left-style | 左边框样式(上下左右均可单独设置) |
border-left-width | 左边框高度(上下左右均可单独设置) |
border-radius | 圆角处理 |
box-shadow | 必写参数:x 轴偏移,y 轴偏移,x 与 y 均接受负值 非必写参数:模糊度,扩散程度,阴影颜色,内阴影设置 |
- 举例
- html 部分
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<link rel="stylesheet" type="text/css" href="./static/CSS/test.css">
</head>
<body>
<div class="box1">
<p>
1234567890 <br>
1234567890 <br>
1234567890 <br>
</p>
</div>
<div class="box2">
<p>
abcdefghijklmnopqrstuvwxyz <br>
abcdefghijklmnopqrstuvwxyz <br>
abcdefghijklmnopqrstuvwxyz <br>
</p>
</div>
<div class="box3">
<p>
一二三四五六七八九十 <br>
一二三四五六七八九十 <br>
一二三四五六七八九十 <br>
</p>
</div>
</body>
</html>
- css 部分
*{
width: 80%;
height: 100px;
}
.box1{
border: 3px solid black; /* 多个属性设置:3px 实线 黑色 */
border-radius: 20px; /* 圆角 */
box-shadow: 10px 10px 5px #888888;
margin-bottom: 15px; /* 设置间距,具体见之后的随笔 */
}
.box2{
border-width: 3px; /* 单个属性设置 */
border-style: dotted; /* 点状线 */
border-top-color: red;
border-bottom-color: blue;
border-left-color: orange;
border-right-color: yellow;
border-radius: 15% 50px; /* 左下右下为 15% 右上左下为 50px */
margin-bottom: 15px;
}
.box3{
border-left-width: 3px;
border-left-style: dashed; /* 虚线 */
border-right: 6px solid; /* 两个属性设置 */
border-radius: 15px 30px 45px 60px; /* 左上为起点,顺时针走 */
}
- 效果截图