CSS中的边框属性

最新推荐文章于 2024-09-24 16:51:16 发布

原创最新推荐文章于 2024-09-24 16:51:16 发布 · 1.3k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#css中的边框属性 #css边框 #css边框倒角 #css边框阴影 #css轮廓

本文详细介绍了CSS中的边框属性，包括边框的简写方式、单边定义、单属性定义以及边框倒角、边框阴影和轮廓等。通过学习，你可以掌握如何设置边框的样式、宽度和颜色，以及创建圆角边框、带有阴影效果的边框和轮廓。

边框属性分类：

Document 1.边框
2.边框倒角
3.边框阴影
 4.轮廓

一.边框属性

1. 边框

1. 简写方式：

 通过一个属性控制四个方向边框的效果。

属性：

          border:width style color;
          width:宽度，边框粗细，以px为单位
          style：样式，边框样式，实线，虚线
                  取值：
                    solid：实线
                    dotted： 点虚线
                    dashed： 横线虚线
          color：颜色， 边框颜色
                取值：
                    合法的颜色值（#rrggbb，rgb（，，））
                    取值为 transparent (透明)

注意：

 border：none；或border：0； 可以取消元素边框

2. 单边定义：

属性：

 border-方向：width style color； 
    方向：top/right/bottom/left

3. 单属性定义:

属性：

  border-属性：值；
  属性： width/style/color

4. 单边单属性定义:

属性：

  border-方向-属性：值；

2. 边框倒角

 将四个方式向的角倒成圆角。

属性：

border-radius
     取值：
       绝对数值 或 百分比

命令显示图：

在这里插入图片描述

网页实例图：

在这里插入图片描述

3. 边框阴影

属性：

box-shadow
   取值：h-shadow v-shadow blur spread color
   inset;
     h-shadow: 必须阴影的水平偏移距离， +， 右偏移，
      -，  左偏移
     v-shadow： 必须引用的垂直偏移距离， +， 下偏移，
      -， 上偏移
     blur: 模糊距离
     spread：阴影尺寸
     color：颜色 
     inset： 值，默认的外阴影更改为阴影

4. 轮廓

作用：

绘制元素周围的一条线，位于边框之外。

属性:

 outline:width style color;
 outline-widht: 轮廓的宽度
 outline-style：轮廓的样式
 outline-color： 轮廓的颜色

 outline：none ；或outline：0； 取消元素轮廓

CSS中的边框属性

边框属性分类：

一.边框属性

1. 边框

1. 简写方式：

属性：

2. 单边定义：

3. 单属性定义:

4. 单边单属性定义:

2. 边框倒角

属性：

3. 边框阴影

属性：

4. 轮廓

作用：

属性:

好了CSS中的"边框属性"jiu到这里le！

好好学习，天天向上！

努力吧，骚年！