CSS 边框圆角+上下左右单边书写整理
作者:
氢金 | 来源:发表于
2019-07-19 17:08 被阅读0次<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>盲写边框圆角及单边绘制</title>
<style type="text/css">
#box{
width:100px;
height:100px;
border-top:4px solid red;
}
#box1{
width:100px;
height:100px;
border-bottom:4px solid blue;
}
#box2{
width:100px;
height:100px;
border-left:4px solid green;
}
#box3{
width:100px;
height:100px;
border-right:4px solid black;
}
#box4{
width:100px;
height:100px;
border:4px solid red;
border-radius:20px;
}
#box5{
width:100px;
height:100px;
border:4px solid red;
border-radius:20px 30px;
}
#box6{
width:100px;
height:100px;
border:4px solid blue;
border-radius:20px 30px 40px 50px;
}
</style>
</head>
<body>
<div id="box">
我是第一个绘制上边
</div>
<br>
<div id="box1">
我是第二个绘制下边
</div>
<br>
<div id="box2">
我是第三个绘制左边
</div>
<br>
<div id="box3">
我是第四个绘制右边
</div>
<br>
<div id="box4">
我是第五个四个边框圆角
</div>
<br>
<div id="box5">
我是第六个对角圆角
</div>
<br>
<div id="box6">
我是第七个全分散圆角
</div>
</body>
</html>
本文标题：CSS 边框圆角+上下左右单边书写整理
本文链接：https://www.haomeiwen.com/subject/aymslctx.html
网友评论