css3新增属性有哪些?css3中常用的新增属性-程序员宅基地

**

一、css3新增边框属性

**

1、css3新增属性之border-color:为边框设置多种颜色
p {
border-style:solid;
border-color:#ff0000 #0000ff;
} 需要注意:“border-width” 属性如果单独使用的话是不会起作用的。请首先使用 “border-style” 属性来设置边框。

2、css3新增属性之border-image:图片边框
div {
-webkit-border-image:url(border.png) 30 30 round; /* Safari 5 /
-o-border-image:url(border.png) 30 30 round; /
Opera */
border-image:url(border.png) 30 30 round;
}
注意:Internet Explorer 不支持 border-image 属性;border-image 属性规定了用作边框的图片。

3、css3新增属性之border-radius:圆角边框
div {
border:2px solid;
border-radius:25px;
}

4、css3新增属性之box-shadow:阴影效果
css3中box-shadow 用于向方框添加阴影
div { box-shadow: 10px 10px 5px #888888;}

二、css3新增背景属性*

1、css3新增属性之background-size:指定背景图片尺寸

在 CSS3 之前,背景图片的尺寸是由图片的实际尺寸决定的。
在 CSS3 中,可以规定背景图片的尺寸,这就允许我们在不同的环境中重复使用背景图片。您能够以像素或百分比规定尺寸。如果以百分比规定尺寸,那么尺寸相对于父元素的宽度和高度。

div {
background:url(img_flwr.gif);
background-size:80px 60px;
background-repeat:no-repeat;
}

2、css3新增属性之background-origin:指定背景图片从哪里开始显示
背景图片可以放置于 content-box、padding-box 或 border-box 区域。
div {
background-image:url(‘smiley.gif’);
background-repeat:no-repeat;
background-position:left;
background-origin:content-box;
}

3、css3新增属性之background-clip:指定背景图片从什么位置开始裁剪
div {
background-color:yellow;
background-clip:content-box;
}

三、css3新增文字效果

1、css3新增属性之text-shadow:文本阴影
h1 {
text-shadow: 5px 5px 5px #FF0000;
}
说明:
(1) <颜色>和<模糊半径>是可选的, 当<颜色>未指定时,将使用文本颜色; 当<模糊半径>未指定时, 半径值为0;

(2) shadow可以是逗号分隔的列表, 如:text-shadow: 2px 2px 2px #ccc, 3px 3px 3px #ddd;

(3) 阴影效果会按照shadow list中指定的顺序应用到元素上;

(4) 这些阴影效果有可能相互重叠, 但不会叠加文本本身;

(5) 阴影可能会跑到容器的边界之外, 但不会影响容器的大小。

2、css3新增属性之word-wrap:自动换行

单词太长的话就可能无法超出某个区域,允许对长单词进行拆分,并换行到下一行
p {word-wrap:break-word;}

四、css3新增动画效果

1、transform变换效果:

css3提供了元素变形效果,也叫做变换。它可以将元素实现旋转、缩放和平移的功能。

属性值:(1)transform ;(2)transform-origin:transform-origin 属性可以设置变换的起点。默认情况下,使用元素的中心作为起点。

2、animation动画效果

CSS3 提供了类似 Flash 关键帧控制的动画效果,通过 animation 属性实现。那么之前的 transition 属性只能通过指定属性的初始状态和结束状态来实现动画效果,有一定的局限性。

animation 实现动画效果主要由两个部分组成:
1、通过类似 Flash 动画中的关键帧声明一个动画;
2、在 animation 属性中调用关键帧声明的动画。

五、css3新增过渡效果

1、transition过渡效果

过渡效果一般是通过一些简单的 CSS 动作触发平滑过渡功能,比如::hover、:focus、:active、:checked 等。
CSS3 提供了 transition 属性来实现这个过渡功能。

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/lzfengquan/article/details/118600990

智能推荐

(python)正则表达式提取字符串中的各种信息(持续更新)_正则表达式 获取所有内容(1)-程序员宅基地

文章浏览阅读275次,点赞4次,收藏6次。前两位数字代表省级行政区,中间两位数字代表市级行政区,后两位数字代表县级行政区、县市辖区或直辖市的行政区划。手机号码有自己特定的特征,比如1开头,手机号码长度 11位,一般来说,中国的邮政编码由6位数字组成。省级行政区 市级行政区 县级行政区。不同运营商的号段分布。

方舟编译器最新技术细节,2024年最新简短的面试总结-程序员宅基地

文章浏览阅读217次,点赞5次,收藏3次。希望本文对你有所启发,有任何面试上的建议也欢迎留言分享给大家。好了,今天的分享就到这里,如果你对在面试中遇到的问题,或者刚毕业及工作几年迷茫不知道该如何准备面试并突破现状提升自己,对于自己的未来还不够了解不知道给如何规划,来看看同行们都是如何突破现状,怎么学习的,来吸收他们的面试以及工作经验完善自己的之后的面试计划及职业规划。好了~如果你看到了这里,觉得文章写得不错就给个赞呗?如果你觉得那里值得改进的,请给我留言。一定会认真查询,修正不足。

李宏毅机器学习课程笔记——回归_李宏毅机器学习中回归课堂笔记-程序员宅基地

文章浏览阅读259次。1、回归是什么回归(Regression) 就是找到一个函数 function,通过输入特征 x,输出一个数值 Scalar。比较像我们常见的函数拟合。2、回归的步骤step1:模型假设,选择模型框架step2:模型评估,如何判断众多模型的好坏(损失函数)step3:模型优化,如何筛选最优的模型(梯度下降)下面以李宏毅老师的课程中的宝可梦能力值的例子来对每个步骤进行分析。2.1 模型选择这里我们都选择线性模型进行分析。2.1.1 单个特征当选取单个特征时,以特征xcpx_{cp}x_李宏毅机器学习中回归课堂笔记

HOG算法及其改进 (附代码)_hog算法代码-程序员宅基地

文章浏览阅读1.2k次,点赞30次,收藏25次。HOG算法及其改进_hog算法代码

RAC 更改主机名及IP地址_crsctl pin css -n-程序员宅基地

文章浏览阅读1.9k次。由于安装RAC时脚本执行顺序错了,导致实例orcl1装到了rac2节点上,orcl2装到了rac1节点上,看起来很别扭,趁这个机会练习下更改主机名和IP地址。原IP及主机名设置:#public IP172.12.1.11 rac1.oracle.com rac1172.12.1.12 rac2.oracle.com rac2#private IP10.10.10.1 rac1_crsctl pin css -n

吴恩达2022机器学习专项课程(一) 1.2 机器学习的应用-程序员宅基地

文章浏览阅读328次,点赞9次,收藏4次。课程将教授哪些内容?为什么机器学习如此重要?机器学习算法的实际应用有哪些?如何提升机器学习算法的性能?人工智能和机器学习的未来趋势是什么?为什么现在是学习机器学习的好时机?

随便推点

VUE实现网页中滚动鼠标时导航背景颜色透明度的改变_vue可以监听鼠标滚轮滑动,导航条透明度变化-程序员宅基地

文章浏览阅读2.9k次,点赞11次,收藏28次。1、HTML<div id="topNav" :style="topNavBg"> 这里是导航内容</div>2、JSexport default { data () { return { topNavBg: { backgroundColor: '' } } }, mounted () { window.addEventListener('scroll', this.handleScroll) // 监听_vue可以监听鼠标滚轮滑动,导航条透明度变化

【数据结构】单链表-练习_设 l 为带头结点的单链表,编写算法实现从尾到头反向输出每个结点的值-程序员宅基地

文章浏览阅读191次。2. 每当访问一个结点时,先递归输出它后面的结点,再输出该结点自身,这样链表就反向输出了。2. 将上述单链表中的元素按从头到尾的顺序,使用头插法新建一个链表 reverse;【题目】设 L 为带头结点的单链表,编写算法实现从尾到头反向输出每个结点的值。3. 打印输出 reverse 中的元素。【思路】 1. 尾插法建立单链表 L;【答案】 1. 建立一个单链表;_设 l 为带头结点的单链表,编写算法实现从尾到头反向输出每个结点的值

(一) ansible (架构,安装,java代理模式面试题-程序员宅基地

文章浏览阅读982次,点赞15次,收藏12次。其它面试题(springboot、mybatis、并发、java中高级面试总结等)既有适合小白学习的零基础资料,也有适合3年以上经验的小伙伴深入学习提升的进阶课程,基本涵盖了95%以上Java开发知识点,真正体系化!由于文件比较大,这里只是将部分目录大纲截图出来,每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频,并且后续会持续更新如果你觉得这些内容对你有帮助,可以添加V获取:vip1024b (备注Java)

dB(分贝)定义及其应用(音量 dB dBA 计算 调整)-程序员宅基地

文章浏览阅读7.5k次,点赞7次,收藏18次。音量 分贝 dB dBA 计算 调整理解dB的第一个要点,就是要知道它是表示两个具有相同单位的同一种物理量的相对关系。即两种电或声功率之比,或两种电压或电流值或类似声量之比。它还是一种测量声音相对响度的单位。最初在电话工程领域,dB是用于定义于表示两个功率比,是P1/P0的比值再取以10为底的对数,再乘以10,其数学式为:dB是一个比值,是一个数值,是一个纯计数方法,没有任何单位标注。由于它在不同领域有着不同的名称,因此它也代表不同的实际意义。常见的领域有:声音、信号、增益等。_db

url中%E6%98转换为中文-程序员宅基地

文章浏览阅读1.8k次。通过parse.unquote()方法进行解码,把 URL编码字符串,转换回原先字符串import urllibdata=urllib.parse.unquote(data)_%e6%b8%b8%e7%88%b1%e7%bd%91%e7%bb%9c 转中文

从C语言来理解文件系统_c语言 fgets与while结合(1),洞悉MySQL底层架构-程序员宅基地

文章浏览阅读982次,点赞24次,收藏19次。因此,可以约定一个更节省空间的格式来表示一个 256 色的图像,此种文件格式的描述如下:文件中的第 0 和第 1 个字节是整数 n,代表图像的宽度(2 字节的 n 的取值范围是 0~65 535,说明图像最多只能是 65 535 个像素宽),第 2 和第 3 个字节代表图像的高度。上面的箭头表示的区域就相当是一个输入流,红色的地方相当于一个开关,这个开关可以控制往深绿色区域(标注的是缓冲区)里放进去的数据,输入20个字节的数据只往缓冲区中放进去了10个字节,剩下的10个字节的数据就被停留在了输入流里!