css边框样式_PHP中文网手记

摘要：<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>边框样式</title> <link rel="shortcut icon" type="image/x-icon" href="ima

<!DOCTYPE html>

<html>

<head>

<style>

*{margin: 0px; padding: 0px;font-family: 微软雅黑;list-style: none;}

.clear{clear: both;}

/*导航*/

.header{width: 1280px;margin: 0px auto;}

.header_left{}

.logo{font-size: 60px;color: #507184;float: left;margin-right: 20px;line-height: 100px;}

.header_left span{border:2px solid #507184;margin-top:20px;height: 60px;display: inline-block;float: left;}

.yixiang{float: left;margin: 20px 0px 0px 20px;}

.yixiang_top{font-size: 20px;color: #507184;}

.yixiang_bottom{font-size: 30px;color: #507184;}

.header_right{float: right;}

.header_right_left{width: 60px;height: 100px;float: left;background: url(images/01.png) no-repeat 50% center;}

.header_right_center{width: 60px;height: 100px;float: left;background: url(images/02.png) no-repeat 50% center;}

.header_right_right{width: 60px;height: 100px;float: right;background: url(images/03.png) no-repeat 50% center;}

.dh{width: 100%;height: 60px;background: #507184;}

.dh ul{width: 1280px;margin: 0px auto;}

.dh ul li{font-size: 30px;line-height: 60px;float: left;margin-right: 50px;}

.dh ul li a{text-decoration: none;color: #fff;}

.dh ul li a:hover{color: #FF5722;}

/*内容*/

.content{width: 1280px;margin: 0px auto;}

.content .box{width: 238px;height: 350px;background-color: #E3E3E3;float: left;line-height: 350px;text-align:center;font-size: 30px;color: red;}

.content .solid_y{margin-top: 20px;}

.solid_y_1{border:1px solid red;font-size: 30px;}

.solid_y_2{border-top:2px solid blue;border-right:2px solid blue;margin: 0px 20px;}

.solid_y_3{border-right:2px solid pink;border-bottom:2px solid pink; }

.solid_y_4{border-bottom:2px solid #FF5722;border-left:2px solid #FF5722;margin: 0px 20px;}

.solid_y_5{border-top:2px solid green;border-left:2px solid green; }

.content .double_y{margin-top: 20px;}

.double_y_1{border:1px double red;font-size: 30px;}

.double_y_2{border-top:2px double blue;border-right:2px double blue;margin: 0px 20px; }

.double_y_3{border-right:2px double pink;border-bottom:2px double pink;}

.double_y_4{border-bottom:2px double #FF5722;border-left:2px double #FF5722;margin: 0px 20px; }

.double_y_5{border-top:2px double green;border-left:2px double green; }

.content .dashed_y{margin-top: 20px;}

.dashed_y_1{border:1px dashed red;font-size: 30px;}

.dashed_y_2{border-top:2px dashed blue;border-right:2px dashed blue;margin: 0px 20px; }

.dashed_y_3{border-right:2px dashed pink;border-bottom:2px dashed pink;}

.dashed_y_4{border-bottom:2px dashed #FF5722;border-left:2px dashed #FF5722;margin: 0px 20px; }

.dashed_y_5{border-top:2px dashed green;border-left:2px dashed green; }

.content .dotted_y{margin-top: 20px;}

.dotted_y_1{border:1px dotted red;font-size: 30px;}

.dotted_y_2{border-top:2px dotted blue;border-right:2px dotted blue;margin: 0px 20px; }

.dotted_y_3{border-right:2px dotted pink;border-bottom:2px dotted pink;}

.dotted_y_4{border-bottom:2px dotted #FF5722;border-left:2px dotted #FF5722;margin: 0px 20px; }

.dotted_y_5{border-top:2px dotted green;border-left:2px dotted green; }

.content .radius_y{margin-top: 20px;margin-bottom: 20px;}

.radius_y_1{border:1px dashed red;font-size: 30px;border-radius: 10px;}

.radius_y_2{border-top:2px dashed blue;border-right:2px dashed blue;margin: 0px 20px; border-radius: 30px;}

.radius_y_3{border-right:2px dashed pink;border-bottom:2px dashed pink;border-radius: 50px;}

.radius_y_4{border-bottom:2px dashed #FF5722;border-left:2px dashed #FF5722;margin: 0px 20px; border-radius: 80px;}

.radius_y_5{border-top:2px dashed green;border-left:2px dashed green; border-radius: 100px;}

.footer{width: 100%;height: 100px;background: #507184;}

.footer div{width: 1280px;margin: 0px auto;text-align: center;}

.footer a{text-decoration: none;font-size: 30px;line-height: 100px;color: #fff;}

</style>

</head>

<body>

<div class="yixiang_top">CSS边框：样式合集</div>

<div class="yixiang_bottom">CSS border style collection</div>

</div>

</div>

</div>

<ul>

<li><a href="#dotted" name="">点状虚线边框</a></li>

</ul>

</div>

<div class="solid_y_1 box">实线边框四边</div>

<div class="solid_y_2 box">实线边框右上</div>

<div class="solid_y_3 box">实线边框右下</div>

<div class="solid_y_4 box">实线边框左下</div>

<div class="solid_y_5 box">实线边框左上</div>

</div>

<div class="double_y_1 box">双线边框四边</div>

<div class="double_y_2 box">双线边框右上</div>

<div class="double_y_3 box">双线边框右下</div>

<div class="double_y_4 box">双线边框左下</div>

<div class="double_y_5 box">双线边框左上</div>

</div>

<div class="dashed_y_1 box">虚线边框四边</div>

<div class="dashed_y_2 box">虚线边框右上</div>

<div class="dashed_y_3 box">虚线边框右下</div>

<div class="dashed_y_4 box">虚线边框左下</div>

<div class="dashed_y_5 box">虚线边框左上</div>

</div>

<div class="dotted_y_1 box">点状虚线边框四边</div>

<div class="dotted_y_2 box">点状虚线边框右上</div>

<div class="dotted_y_3 box">点状虚线边框右下</div>

<div class="dotted_y_4 box">点状虚线边框左下</div>

<div class="dotted_y_5 box">点状虚线边框左上</div>

</div>

</div>

</div>

</body>

</html>

css边框样式

热门词条