tofacebook.com -专业IT技术社区 CSS3-边框(border-radius、box-shadow、border-image) Web程序 - tofacebook.com-专业IT技术社区
140°

CSS3-边框(border-radius、box-shadow、border-image) Web程序

标签:距离   initial   source   ble   idt   image   多个   blog   图像   

CSS3中的边框属性:border-radius、box-shadow、border-image

圆角:border-radius

使用 CSS3 border-radius 属性,你可以给任何元素制作 "圆角"。

如果你在 border-radius 属性中只指定一个值,那么将生成 4 个 圆角。

但是,如果你要在四个角上一一指定,可以使用以下规则:

  • 四个值: 第一个值为左上角,第二个值为右上角,第三个值为右下角,第四个值为左下角。
  • 三个值: 第一个值为左上角, 第二个值为右上角和左下角,第三个值为右下角
  • 两个值: 第一个值为左上角与右下角,第二个值为右上角与左下角
  • 一个值: 四个圆角值相同

css3圆角属性:

属性 描述
border-radius 所有四个边角 border-*-*-radius 属性的缩写
border-top-left-radius 定义了左上角的弧度
border-top-right-radius 定义了右上角的弧度
border-bottom-right-radius 定义了右下角的弧度
border-bottom-left-radius 定义了左下角的弧度

盒阴影:box-shadow

box-shadow属性可以设置一个或多个下拉阴影的框,

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

boxShadow 属性是一个用逗号分隔阴影的列表,每个阴影由 2-4 个长度值、一个可选的颜色值和一个可选的 inset 关键字来规定。省略长度的值是 0。 

说明
h-shadow 必需的。水平阴影的位置。允许负值
v-shadow 必需的。垂直阴影的位置。允许负值
blur 可选。模糊距离
spread 可选。阴影的大小
color 可选。阴影的颜色。
inset 可选。从外层的阴影(开始时)改变阴影内侧阴影

边界图片:border-image

有了 CSS3 的 border-image 属性,你可以使用图像创建一个边框,border-image 属性允许你指定一个图片作为边框,用于创建上文边框的原始图像。

border-image属性是速记属性用于设置 border-image-source, border-image-slice, border-image-width, border-image-outset 和border-image-repeat 的值,省略的值设置为它们的默认值。

语法:border-image: source slice width outset repeat|initial|inherit;

描述
border-image-source 用于指定要用于绘制边框的图像的位置
border-image-slice 图像边界向内偏移
border-image-width 图像边界的宽度
border-image-outset 用于指定在边框外部绘制 border-image-area 的量
border-image-repeat 用于设置图像边界是否应重复(repeat)、拉伸(stretch)或铺满(round)。

CSS3-边框(border-radius、box-shadow、border-image)

标签:距离   initial   source   ble   idt   image   多个   blog   图像   

原文地址:https://www.cnblogs.com/lmjZone/p/8566330.html


本文由百家号/熊掌号作者上传并发布,百家号仅提供信息发布平台。文章仅代表作者个人观点,不代表百度立场。

已有 0 条评论

    我有话说: