CSS 基础学习-050 设置单独的边框

由 hrs, 4 九月, 2021

 border-top-style: dotted;  设置上边框
  border-right-style: solid; 设置右边框
  border-bottom-style: dotted; 设置下边框
  border-left-style: solid;   设置左边框

实例代码:

<!doctype html>
<html>
  <head>
    <title>单独的边框</title>
    <meta charset="utf-8">
    <style>
      p{
        border-top-style:dotted;
        border-right-style:solid;
        border-bottom-style:dotted;
        border-left-style:solid;
        width:300px;
          
      }   
    </style>
  </head>
  <body>
    <h1> 单独的边框</h1>
    <p>两种不同的边框</p>

  </body>
</html>

运行效果：

css-050.png

 

提示：可以把p元素的css改成border-style:dotted solid; 运行效果是一样的。

<!doctype html>
<html>
  <head>
    <title>单独的边框</title>
    <meta charset="utf-8">
    <style>
      p{
        border-style:dotted solid;
        
        width:300px;
          
      }   
    </style>
  </head>
  <body>
    <h1> 单独的边框</h1>
    <p>两种不同的边框</p>

  </body>
</html>

 

标签

评论