日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學無先后，達者為師

網站首頁 編程語言 正文

css中border屬性設置

作者：SSS4362 更新時間： 2022-07-10 編程語言

css中border屬性設置

1.單獨設置

a.語法

/*所有的賦值都符合順時針,看對面,若沒有,相鄰則為最上面*/
/*設置邊框的寬度*/
border-witdth:像素值1,像素值2...像素值4;
/*設置邊框的風格 solid 實線 dashed 虛線 dotted原點線*/
border-style: 風格1,風格2,風格3,風格4;
/*設置邊框的顏色*/
border-color: 顏色值1,顏色值2,顏色值3,顏色值4;

b.源代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>屬性值的設置</title>
    <style type="text/css">
         *{
          /* 清除瀏覽器默認樣式的影響 */
          padding: 0;
          margin: 0;
         }
         #top{
          width: 200px;
          height: 200px;
          border-width: 10px 20px 40px 30px;
          /* 沒有設置邊框的類型的話,沒有任何的顯示效果的 */
          border-style: solid dashed dotted solid;
          /* solid是實線,dashed是虛線 dotted是原點線 */
          /* 沒有設置顏色,是沒有任何肉眼可見的結果的 */
          border-color: brown skyblue yellow grey;
          background-color: red;
         }
    </style>    
</head>
<body>
    <div id="top"></div>
</body>
</html>

c.展示效果

在這里插入圖片描述

2.合并設置

a.語法

border: 邊框寬度 邊框類型 邊框顏色;

b.源代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>屬性值的設置</title>
    <style type="text/css">
         *{
          /* 清除瀏覽器默認樣式的影響 */
          padding: 0;
          margin: 0;
         }
         #top{
          width: 200px;
          height: 200px;
          border: 10px solid skyblue;
          background-color: red;
         }
    </style>    
</head>
<body>
    <div id="top"></div>
</body>
</html>

c.展示效果

在這里插入圖片描述

3.按照方向設置

a.語法

border-方位: 邊框的寬度 邊框的類型 邊框的顏色;
/*
其中方位有上（top)、右(right)、下(bottom)、左(left)
*/

b.源代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>屬性值的設置</title>
    <style type="text/css">
         *{
          /* 清除瀏覽器默認樣式的影響 */
          padding: 0;
          margin: 0;
         }
         #top{
          width: 200px;
          height: 200px;
          /* 對邊框每條線設置不同的樣式 */
          border-top: 10px solid gray;
          border-bottom: 15px dashed brown;
          border-left: 8px solid yellow;
          border-right: 13px dotted purple;
          background-color: red;
         }
    </style>    
</head>
<body>
    <div id="top"></div>
</body>
</html>

c.展示效果

在這里插入圖片描述

原文鏈接：https://blog.csdn.net/SSS4362/article/details/125477019

欄目分類
最近更新