![](https://img-blog.csdnimg.cn/20201014180756913.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
CSS3新特性
Blank0411
少年,未来可期的意思是:你得从现在开始努力!
展开
-
CSS3 用text-overflow解决文字排版问题
基本语法text-overflow的使用需配合hight,over-flow:hidden;white-space:nowrap;三个属性共同使用text-overflow: clip;ellipsis;stringclip: 直接隐藏不显示ellipse: 用… 三个点来表示溢出的文字 (常用)string:可自定义符号来表示放不下的字符<!DOCTYPE html><html lang="en"><head> <meta charset=原创 2020-10-28 14:28:43 · 542 阅读 · 0 评论 -
CSS3字体效果 text-shadow
text-shadow: h-shadow v-shadow blur(阴影的长度) color利用text-shadow属性 做出如下效果:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>发光字,立体字,苹果字</title> <style type="text/css"> .faguangzi{ color:原创 2020-10-28 14:05:01 · 200 阅读 · 0 评论 -
CSS3中的关键帧@keyframes 和 动画animation
animation的复合属性animation-name 定义的@keyframes的名称animation-duration 动画持续的时间animation-timing-function 与transition的那几个一致animation-delay 延迟几秒后再运行动画animation-iteration-count 循环几次;infinite无限循环animation-direction normal(默认) alternate动画的反方向播放动画实例<!DOC原创 2020-10-28 13:16:46 · 218 阅读 · 0 评论 -
CSS3 transition过渡
transitontransition-property:过渡属性(默认值为all)tansition-duration:过渡持续时间(默认值为0)transition-timing-function:过渡函数(默认值为ease函数)transition-delay:过渡延迟时间(默认值为0s)transition-timing-function:ease 慢快慢ease in 慢-快ease out 快-慢liner 匀速ease-in-out 与ease效果相同step-end原创 2020-10-28 10:49:59 · 110 阅读 · 0 评论 -
盒子阴影box-shadow
box-shadow:h-shadow v-shadow blur spread color inseth-shadow:必须。水平阴影的位置,允许负值v-shadow:必须。垂直阴影的位置,允许负值blur 可选,模糊距离spread 可选,阴影的尺寸color 可选,阴影颜色inset 可选,将外部阴影(outset)改为内部阴影<!DOCTYPE html><html lang="en"><head> <meta charset="UTF.原创 2020-10-28 10:28:55 · 65 阅读 · 0 评论 -
线性渐变,径向渐变,重复性渐变
线性渐变,径向渐变,重复性渐变<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>线性渐变,径向渐变,重复性渐变</title> <style type="text/css"> .content{ clear: both; } .fleft{ float:left; } .line{ back原创 2020-10-27 16:43:55 · 285 阅读 · 0 评论 -
opacity与rgba的区别
` 伪类选择器 1 0.8 0.6 0.4 0.2 1 0.8 0.6 0.4 0.2 `原创 2020-10-27 14:52:24 · 84 阅读 · 0 评论 -
画梯形
梯形与三角形的区别是 区别是多设置了一个宽度<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>画梯形</title> <style type="text/css"> .ladder{ width: 50px; height: 0px; border-top: 50px solid red; borde原创 2020-10-27 11:36:42 · 280 阅读 · 0 评论 -
画五角星
**<!-- 五角星是由3个三角形组成 六角星 是由2个三角形组成(一个尖朝上,一个尖朝下) -->**原创 2020-10-27 11:07:17 · 201 阅读 · 0 评论 -
CSS3画三角形、菱形、平行四边形
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>画三角形,菱形,平行四边形</title> <style type="text/css"> .trangle{ border-right: 0px solid red; border-left: 100px solid blue; border-top:原创 2020-10-27 10:25:14 · 235 阅读 · 0 评论 -
css3伪类选择器
css3伪类选择器: 动态伪类选择器: 他不存在于html中,只有在交互的过程中,才能使用动态伪类选择器对其进行样式的渲染 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>伪类选择器</title> <style type="text/css"> a:link{color: red;} a:hover{color原创 2020-10-26 15:50:09 · 99 阅读 · 0 评论