css3新增了哪些属性样式?

2024-01-17 11:15 小编
    在介绍css3新增的属性样式(新特性)前,我们要先知道什么是css3。
    CSS是层叠样式表(CascadingStyleSheets)的简称。
    CSS是一种标记语言,属于浏览器解释型语言,可以直接由浏览器执行,不需要编译。
    CSS是用来表现HTML或XML的标记语言。
    CSS是由W3C的CSS工作组发布推荐和维护的.
    CSS是编程入门人员的必修课,运用CSS样式可以让页面变得美观。
    CSS语法由三部分构成:选择器、属性和值,例:selector{property:value}。
    而CSS3就是最新的CSS标准,比之新增加了一些属性样式,既新特性。下面我们来介绍css3中几种常用的新特性(属性样式):
    一、边框
    border-image属性:是一个简写属性,用于设置所有border-image-*属性的简写属性。
    border-radius属性:是一个简写属性,用于设置四个border-*-radius属性。
    border-top-left-radius设置左上角
    border-top-right-radius设置右上角
    border-bottom-right-radius设置左下角
    border-bottom-right-radius设置右下角
    border-top-left-radius:xy;x代表左上角x轴偏移量,y代表y轴偏移量,可以设置百分比以及像素。
    border-radius:;
    一个值表示左上右上左下右下都是
    两个值表示第一个值左上右下第二个值右上左下
    三个值表示第一个左上第二个值右上左下第三值右下
    四个之分别左上右上右下左下
    border-radius0000/0000;
    前四个是四个x方向的x轴偏移后四个是y轴方向的偏移
    box-shadow属性:向方框添加一个或多个阴影。
    语法:box-shadow:值
    值说明:
    (1)第一个值:Npx阴影向水平方向偏移N个像素正数往右负数往左
    (2)第二个值:Npx阴影向垂直方向偏移N个像素正数往下负数往上
    (3)第三个值:羽化大小(模糊的大小)
    (4)第四个值:阴影尺寸
    (5)第五个值:颜色默认值是黑色
    (6)第六个参数:内外阴影默认是外阴影内阴影是inset
    (7)阴影可以写多个,中间用逗号隔开
    (8)阴影可以简写,但是需要注意有一些值需要补0
    综合例子:
    p{
    border:2pxsolidred;
    border-radius:25px;/*创建圆角,100%为圆形*/
    box-shadow:10px10px5px#888888;
    }
    二、背景
    background-size属性:规定背景图片的尺寸。(重要属性)
    语法:background-size:值
    值说明:
    (1)当只有一个值的情况下,宽度实现拉伸,并且高度会保持等比例,可以支持px,也可以支持百分比,百分比参照的是这个盒子本身的宽高
    (2)当有两个值的情况下,宽度和高度会分别拉伸到对应的值,可能会变形,可以支持px,也可以支持百分比,百分比参照的是这个盒子本身的宽高
    (3)contain当图片的宽度或者是高度在缩放的时候有一个“碰到”了盒子的边缘,则停止变化,(宽度或高度满足一个即可)
    (4)在contain的基础上保证不留白,这就是cover的效果(宽度和高度都需要满足)
    background-origin属性:规定背景图片的定位区域。
    语法:background-origin:值
    值说明:
    (1)border-box:忽略边框直接从边框的起始0,0点平铺
    (2)padding-box:默认值,忽略padding直接从padding的起始0,0点平铺
    (3)content-box:从内容部分开始平铺跟padding有关系
    background-image属性:设置元素的背景图像。
    background-repeat属性:设置是否及如何重复背景图像。
    三、文本效果
    text-align-last属性:设置如何对齐最后一行或紧挨着强制换行符之前的行。
    text-emphasis属性:向元素的文本应用重点标记以及重点标记的前景色。
    text-justify属性:规定当text-align,设置为“justify”时所使用的对齐方法。
    text-outline属性:规定文本的轮廓。
    text-overflow属性:规定当文本溢出包含元素时发生的事情。
    text-shadow属性:向文本添加阴影。
    text-wrap属性:规定文本的换行规则。
    word-wrap属性:允许对长的不可分割的单词进行分割并换行到下一行。
    四、颜色与透明度
    rgba()
    R:Red、G:Green、B:Blue、A:Alpha,R、G、B取值范围0~255,A的取值范围是0-1。
    RGBA可以用于所有使用颜色的地方
    rgb三个值越小,颜色越黑
    如果是纯色的背景,可以是使用rgba
    如果是图片,可以脱离父子关系,让后用定位的方式来做。
    hsla()
    H色调取值范围0~360,0/360表示红色、120表示绿色、240表示蓝色
    S饱和度取值范围0%~100%
    L亮度取值范围0%~100%
    A透明度取值范围0~1
    例:
    background-color:hsla(120,100%,50%,1);


Tag: 哪些
在线咨询 拨打电话

电话

13363039260

内部绝密传真282期

微信二维码