• 微信号
目录

html笔记

您当前的位置:首页 > 我的笔记 > html笔记>css3边框

上一篇: css3文本样式

下一篇: css3背景

css3边框

CSS3对网页中的边框进行了一些改进,主要包括支持圆角边框、多层边框、边框色彩与图片等。在CSS3中最常用的一个改进就是圆角边框,通过CSS3的属性可以快速实现圆角定义,同时还可以根据实际情况针对特定角进行圆角定义 。

圆角边框

border-radius:属性是一个简写属性,用于设置四个 border-*-radius 属性。

语法:border-radius: 1-4 length|% / 1-4 length|%;

注释:按此顺序设置每个 radii 的四个值。如果省略 bottom-left,则与 top-right 相同。如果省略 bottom-right,则与 top-left 相同。如果省略 top-right,则与 top-left 相同。

属性值

  • length :定义圆角的形状
  • % : 以百分比定义圆角的形状
div{
    border-radius: 10px;
}
/* 等价于 */
div{
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
}
/* ------- */
div{
    border-radius: 5px 10px;
}
/* 等价于 */
div{
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
}
/* ------- */
div{
    border-radius: 5px 10px 15px 20px;
}
/* 等价于 */
div{
    border-top-left-radius: 5px;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 15px;
    border-bottom-left-radius: 20px;
}

边框阴影

box-shadow:属性向框添加一个或多个阴影

语法 : box-shadow: h-shadow v-shadow blur spread color inset

注释:box-shadow 向框添加一个或多个阴影。该属性是由逗号分隔的阴影列表,每个阴影由 2-4 个长度值、可选的颜色值以及可选的 inset 关键词来规定。省略长度的值是 0。

属性值

  • h-shadow : 必需。水平阴影的位置。允许负值。指定阴影水平方向的偏移,即阴影在 x 轴的位置。值为正数时,阴影在元素的右侧;值为负数时,阴影在元素的左侧
  • v-shadow : 必需。垂直阴影的位置。允许负值。设置阴影垂直方向的偏移,即阴影在 y 轴的位置。值为正数时,阴影在元素的下方;值为负数时,阴影在元素的上方
  • blur :可选。模糊距离。设置阴影的模糊半径,值为 0 意味着该阴影是固态而锋利的,完完全全没有模糊效果。blur 值越大,阴影则更不锋利而更朦胧 / 模糊。负值是不合法的,会被修正成 0
  • spread :可选。阴影的尺寸。改变阴影的大小,其值可以是正负值,如果值为正,则整个阴影都延展扩大,反之值为负值,则缩小
  • color : 可选。阴影的颜色
  • inset : 可选。将外部阴影 (outset) 改为内部阴影
div {
    width: 300px;
    height: 500px;
    box-shadow: 5px 10px 20px 20px red;
}

边框图片

border-image 属性是一个简写属性,用于设置以下属性:

  • border-image-source
  • border-image-slice
  • border-image-width
  • border-image-outset
  • border-image-repeat

如果省略,会设置默认值

语法: border-image:source slice width outset repeat

属性值

  • source {string} :用在边框的图片的路径
  • slice {number} :图片边框向内偏移
  • width {number} :图片边框的宽度。
  • outset {number} :边框图像区域超出边框的量
  • repeat {string} :图像边框是否应平铺(repeat)、铺满(round)或拉伸(stretch)
div {
    border: 5px solid transparent;
    border-image: url(../images/border.png) 27 round;
}

上一篇: css3文本样式

下一篇: css3背景