css中border属性设置

最新推荐文章于 2024-07-23 14:07:14 发布

SSS4362

最新推荐文章于 2024-07-23 14:07:14 发布

阅读量5.4k

点赞数 5

分类专栏： java web基础知识文章标签： css css3 前端 border属性设置

本文链接：https://blog.csdn.net/SSS4362/article/details/125477019

版权

java web基础知识专栏收录该内容

18 篇文章 0 订阅

订阅专栏

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>