温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

css3中新增了的属性样式是什么

发布时间:2021-06-12 09:24:13 来源:亿速云 阅读:163 作者:小新 栏目:web开发

小编给大家分享一下css3中新增了的属性样式是什么,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!

在介绍css3新增的属性样式(新特性)前,我们要先知道什么是css3。

CSS 是层叠样式表 ( Cascading Style Sheets ) 的简称。
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 : x y ; x代表左上角x轴偏移量 ,y代表y轴偏移量,可以设置百分比以及像素。

border-radius:;
一个值表示 左上 右上 左下 右下 都是
  两个值表示  第一个值左上右下 第二个值 右上左下        
三个值表示  第一个 左上 第二个值右上左下 第三值 右下
  四个之 分别 左上 右上 右下 左下

border-radius 0 0 0 0/ 0 0 0 0;
  前四个是四个x方向的x轴偏移 后四个是y轴方向的偏移

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

语法:box-shadow:值
 值说明:
 (1)第一个值 :Npx  阴影向水平方向偏移N个像素  正数往右 负数往左
 (2)第二个值 :Npx  阴影向垂直方向偏移N个像素  正数往下 负数往上
 (3)第三个值 :羽化大小 (模糊的大小)
 (4)第四个值 :阴影尺寸
 (5)第五个值 :颜色 默认值是黑色
 (6)第六个参数: 内外阴影 默认是外阴影 内阴影是inset
 (7)阴影可以写多个,中间用逗号隔开
 (8)阴影可以简写,但是需要注意有一些值需要补0

综合例子:

p{
    border: 2px solid red;
    border-radius:25px; /* 创建圆角,100%为圆形 */
    box-shadow: 10px 10px 5px #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);

以上是“css3中新增了的属性样式是什么”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注亿速云行业资讯频道!

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI