php外边框样式,css边框样式

边框样式

*{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;}

边框样式

CSS边框：样式合集

CSS border style collection

• 实线边框
• 双线边框
• 虚线边框
• 点状虚线边框
• 圆角

实线边框四边

实线边框右上

实线边框右下

实线边框左下

实线边框左上

双线边框四边

双线边框右上

双线边框右下

双线边框左下

双线边框左上

虚线边框四边

虚线边框右上

虚线边框右下

虚线边框左下

虚线边框左上

点状虚线边框四边

点状虚线边框右上

点状虚线边框右下

点状虚线边框左下

点状虚线边框左上

圆角10像素

圆角30像素

圆角50像素

圆角80像素

圆角100像素

回到顶部