CSS 基础教程-065 CSS定义单边样式

由 hrs, 10 二月, 2020

实例代码：

<!doctype html>
  2 <html>
  3     <head>
  4         <meta charset="utf-8">
  5         <style type="text/css">
  6             p{
  7                 width:300px;
  8                 padding:5px;
  9                 border-top-style: solid;/*单边框实线*/
 10                 border-right-style:double;/*单边框双线*/
 11                 border-bottom-style:dotted;/* 单边框点状*/
 12                 border-left-style:dashed;/* 单边框虚线*/
 13             }
 14             pre{color:red;}
 15         </style>
 16     </head>
 17     <body>
 18         <h3>单边框实例</h3>
 19         <p>定义四个单边框</p>
 20         <pre>
 21 border-top-style: solid;/*单边框实线*/
 22 border-right-style:double;/*单边框双线*/
 23 border-bottom-style:dotted;/* 单边框点状*/
 24 border-left-style:dashed;/* 单边框虚线*/
 25         </pre>
 26 
 27     </body>
 28 </html>

运行效果：

css_065.png

 

标签

评论