6_边框_背景_渐变

CSS边框属性

元素的边框就是围绕元素内容和内边距的一条或多条线。

元素的边框属性：

  1. border 简写属性，用于把针对四个边的属性设置在一个声明。

    border: 2px solid rgb(66, 184, 162);

    • border-width 简写属性，用于为元素的所有边框设置宽度，或者单独地为各边边框设置宽度。

      • 常用单位为像素(px)、em
      • thin细的边框。/medium 默认/thick 定义粗的边框。

      border-width: thick;

    • border-style 用于设置元素所有边框的样式，或者单独地为各边设置边框样式。

      • none 定义无边框。
      • dotted 定义点状边框
      • dashed 定义虚线
      • solid 定义实线。
      • double 定义双线
      • groove 定义 3D 凹槽边框。
      • ridge 定义 3D 垄状边框。
      • inset 定义 3D inset 边框
      • outset 定义 3D outset 边框。

      border-style: ridge dotted;

    • border-color 简写属性，设置元素的所有边框中可见部分的颜色，或为 4 个边分别设置颜色。

    border-color: rgb(121, 249, 151) rgb(78, 96, 9)

  2. border-bottom 简写属性，用于把下边框的所有属性设置到一个声明中。

    border-bottom: 5px rgb(241, 225, 244) dotted;

    • border-bottom-color 设置元素的下边框的颜色。
    • border-bottom-style 设置元素的下边框的样式。
    • border-bottom-width 设置元素的下边框的宽度。

  3. border-left 简写属性，用于把左边框的所有属性设置到一个声明中。

    • border-left-color 设置元素的左边框的颜色。
    • border-left-style 设置元素的左边框的样式。
    • border-left-width 设置元素的左边框的宽度。

  4. border-right 简写属性，用于把右边框的所有属性设置到一个声明中。

    • border-right-color 设置元素的右边框的颜色。
    • border-right-style 设置元素的右边框的样式。
    • border-right-width 设置元素的右边框的宽度。

  5. border-top 简写属性，用于把上边框的所有属性设置到一个声明中。

    • border-top-color 设置元素的上边框的颜色。
    • border-top-style 设置元素的上边框的样式。
    • border-top-width 设置元素的上边框的宽度。
CSS3新增的边框属性：

  1. border-radius 设置所有四个 border-radius 属性的简写属性。

    • *同时设定四个角的圆角

    • **分别设定左上 右下、左下 右上圆角

    • *** 分别设定左上 、左下 右上、右下圆角

    • **** 分别设定左上 、右上、右下、左下圆角

      • border-top-left-radius 左上角圆角边框
      • border-top-right-radius 右上角圆角边框
      • border-bottom-right-radius 右下角圆角边框
      • border-bottom-left-radius 左下角圆角边框

      border-radius: 3em/1em;

      border-top-left-radius: 2em 10em;

  2. border-image 设置所有 border-image属性的简写属性。

    • border-image 复合属性，设置边框使用图像来填充，可依次设置一下属性：
    • border-image-source 图像来源路径
    • border-image-slice 边框背景图的分割方式
    • border-image-width 边框的宽度。
    • border-image-outset 边框背景图的扩展(边框图像区域超出边框的量。)
    • border-image-repeat 边框图像的平铺方式:stretch拉伸/repeat重复铺满/round重复铺满并对图片进行调整
    border-image-source: url(./img/bj.jpg);
border-image-slice:90;
border-image-width:30px ;
border-image-outset:30px;
border-image-repeat: round stretch;

    前两个属性需要和后面三个加/分割/ （和round不要加/）
border-image:url(./img/bj.jpg) 30 /20px /30px round;

  3. box-shadow 向方框添加一个或多个阴影。

    • none： 无阴影
    • 阴影水平偏移值/阴影垂直偏移值/阴影模糊值/阴影外延值/阴影的颜色/inset内阴影(默认值为outset)
    偏移量为0的时候outset写不写效果不一样，其他可以省略不写

 box-shadow: -5px -5px 1px rgb(255,0,0),-10px -10px 1px rgb(255,255,0),-15px -15px 1px rgb(200,100,0);
 
 // 四周阴影
 box-shadow: 
 0px 0px 1px  5px rgb(255,0,0),
 0px 0px 1px  10px rgb(255,255,0),
 0px 0px 1px 15px  rgb(200,100,0);
 
 // 内嵌阴影（inset方向反过来）
 box-shadow: 5px 5px 5px rgb(251, 97, 186) inset;

元素的背景属性：

  1. background 简写属性，作用是将背景属性设置在一个声明中。
    • background-attachment 背景图像是否固定或者随着页面的其余部分滚动。scroll默认值。/fixed当页面的其余部分滚动时，背景图像不会移动。
    • background-color 设置元素的背景颜色。
    • background-image 把图像设置为背景。
    • background-position 设置背景图像的起始位置。
      • left/right/center/bottom/top这几个属性值可以两两组合使用，如果只规定了一个关键词，那么第二个值将是"center"。
      • x% y% 第一个值是水平位置，第二个值是垂直位置;左上角是 0% 0%。右下角是 100% 100%;如果仅规定了一个值，另一个值将是 50%。
      • x y 左上角是 0 0。单位是像素 (0px 0px) 或任何其他的 CSS 单位。如果仅规定了一个值，另一个值将是50%。
    • background-repeat 设置背景图像是否及如何重复。repeat/repeat-x/repeat-y/no-repeat

CSS3新增的背景属性：

  1. background-size 规定背景图片的尺寸。
    • 像素/百分比设置宽高
    • cover:把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。
    • contain 把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域
  2. background-clip 规定背景的绘制区域。
    • border-box 背景被裁剪到边框盒
    • padding-box 背景被裁剪到内边距框。
    • content-box 背景被裁剪到内容框。
  3. background-origin 规定背景图片的定位区域。
    • padding-box 背景图像相对于内边距框来定位。
    • border-box 背景图像相对于边框盒来定位。
    • content-box 背景图像相对于内容框来定位。

线性渐变和径向渐变

线性渐变：

属性：linear-gradinet(开始位置 角度，起始颜色，终止颜色 )

background-image: linear-gradient(rgb(198, 218, 78),rgb(34, 63, 113));

  1. 开始位置：渐变开始的位置，属性值可以为百分比/长度/left、right、top、bottom（可组合使用）

    background-image: linear-gradient(to right bottom,rgb(25, 24, 156),rgb(194, 159, 73));

background-image: linear-gradient(60deg ,rgb(198, 218, 78)0%,rgb(34, 63, 113)10px,rgb(251, 165, 168)100px,rgb(86, 162, 22)300px);

  2. 角度：渐变终止方向的角度，当开始位置为数值或百分比时候可用

    background-image: linear-gradient(60deg ,rgb(198, 218, 78)0%,rgb(34, 63, 113)20%,rgb(251, 165, 168)80%,rgb(86, 162, 22)100%);

  3. 起始颜色......

  4. 终止颜色......

  5. 重复渐变将属性修改为：repeating-linear-gradinet()

    background-image: repeating-linear-gradient(60deg,rgb(198, 218, 78)20px,rgb(251, 165, 168)40px);

径向渐变(放射渐变)：

属性：radial-gradinet()(形状 发散方向，起始颜色，终止颜色)

  1. 形状:ellipse（椭圆）/circle（圆形）

    background-image: radial-gradient(circle,rgb(70, 90, 255),rgb(43, 135, 21),rgb(231, 144, 53));

  2. 发散方向：属性值可以为left、right、top、bottom、center（可组合使用）

    background-image: radial-gradient(circle at top left,rgb(69, 13, 130),rgb(93, 184, 43),rgb(189, 43, 210));

  3. 大小(半径)：属性值可用像素或关键字表示

    • closest-side:圆心到距离最近的边
    • farthest-side:圆心到距离最远的边
    • closest-corner：圆心到距离最近的角
    • farthest-corner：圆心到距离最远的角
    background-image: radial-gradient(circle 50px,rgb(145, 195, 100),rgb(237, 235, 20));

background-image: radial-gradient(circle farthest-corner,rgb(120, 240, 13),rgb(237, 235, 20),rgb(10, 99, 250));
```

  1. 起始颜色......

  2. 终止颜色......

  3. 重复的径向渐变：repeating-radial-gradinet()

    background-image: repeating-radial-gradient(circle closest-side,rgb(120, 240, 13),rgb(237, 235, 20),rgb(10, 99, 250));

线性渐变和径向渐变

线性渐变：

属性：linear-gradinet(开始位置 角度，起始颜色，终止颜色 )

background-image: linear-gradient(rgb(198, 218, 78),rgb(34, 63, 113));

  1. 开始位置：渐变开始的位置，属性值可以为百分比/长度/left、right、top、bottom（可组合使用）

    background-image: linear-gradient(to right bottom,rgb(25, 24, 156),rgb(194, 159, 73));

background-image: linear-gradient(60deg ,rgb(198, 218, 78)0%,rgb(34, 63, 113)10px,rgb(251, 165, 168)100px,rgb(86, 162, 22)300px);

  2. 角度：渐变终止方向的角度，当开始位置为数值或百分比时候可用

    background-image: linear-gradient(60deg ,rgb(198, 218, 78)0%,rgb(34, 63, 113)20%,rgb(251, 165, 168)80%,rgb(86, 162, 22)100%);

  3. 起始颜色......

  4. 终止颜色......

  5. 重复渐变将属性修改为：repeating-linear-gradinet()

    background-image: repeating-linear-gradient(60deg,rgb(198, 218, 78)20px,rgb(251, 165, 168)40px);

径向渐变(放射渐变)：

属性：radial-gradinet()(形状 发散方向，起始颜色，终止颜色)

  1. 形状:ellipse（椭圆）/circle（圆形）

    background-image: radial-gradient(circle,rgb(70, 90, 255),rgb(43, 135, 21),rgb(231, 144, 53));

  2. 发散方向：属性值可以为left、right、top、bottom、center（可组合使用）

    background-image: radial-gradient(circle at top left,rgb(69, 13, 130),rgb(93, 184, 43),rgb(189, 43, 210));

  3. 大小(半径)：属性值可用像素或关键字表示

    • closest-side:圆心到距离最近的边
    • farthest-side:圆心到距离最远的边
    • closest-corner：圆心到距离最近的角
    • farthest-corner：圆心到距离最远的角
    background-image: radial-gradient(circle 50px,rgb(145, 195, 100),rgb(237, 235, 20));

background-image: radial-gradient(circle farthest-corner,rgb(120, 240, 13),rgb(237, 235, 20),rgb(10, 99, 250));
```

  1. 起始颜色......

  2. 终止颜色......

  3. 重复的径向渐变：repeating-radial-gradinet()

    background-image: repeating-radial-gradient(circle closest-side,rgb(120, 240, 13),rgb(237, 235, 20),rgb(10, 99, 250));

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

  • CSS3
    1、属性选择器：id选择器 # 通过id 来选择类名选择器 . 通过类名来选择属性选择器 ...
    Yuann阅读 1,658评论 0赞 7
  • CSS3的正确打开方式（详解|持续更新）
    话题背景：如今网页展示的姿势是这样的 图片来自：设计之家 炫酷的网页展示，支撑它的正是强大的CSS3，还有什么理由...
    aliensq阅读 2,072评论 0赞 2
  • Css专题总结
    选择qi：是表达式 标签选择器 类选择器 属性选择器 继承属性： color，font，text－align，li...
    wzhiq896阅读 1,810评论 0赞 2
  • 第四十五章 我还要做梦
    宝玉看了看镜子里的自己，穿着一套全新的网球服，整个人象刚从时装发布会上下来一样精神焕发。他非常惬意地朝镜子里的自己...
    可可豆子阅读 210评论 0赞 1
  • 感赏日记10
    今天晚上，儿子给他爸打电话，问他在哪里。 本来我今天值班，趁着任务间隙出来和老公一起办个事，我对老公说：看，给你打...
    微笑的石子妈妈阅读 187评论 0赞 3