hgame5,丝袜秀,汶上
white-space:nowarp; overflow:hidden; text-overflow:ellipsis
边界换行
处理单词折断
white-space 属性设置如何处理元素内的空白(空格)
文本阴影
text-shadow: x轴(X Offset) y轴(Y Offset) 模糊半径(Blur) 颜色(Color)
可以写多个,,隔开
text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 40px #ff00de, 0 0 70px #ff00de; </br> </br>
border-radius:5px
border-radius:50%//标准圆
border-radius:5px(主对角线) 25px(次对角线);
border-radius:10px 20px 30px 40px(从左上起顺时针);
source
border-image-source:url(image url);
width
border-image-width: 1;
repeat
三种repeat方式 stretch 压缩或伸展border-image的背景图片以其刚好适应border-width的宽度 repeat 简单的重复 round 压缩或伸展border-image的背景图片以图片最小单元刚好适应border-width的宽度,在此基础上重复
outset边框图像区域超出边框的量,值为border-image-width的倍数
边框图片设置生存器
box-shadow:inset x-offset y-offset blur-radius spread-radius color
阴影类型:此参数是一个可选值,如果不设值,其默认的投影方式是外阴影;如果取其唯一值inset,就是将外阴影变成内阴影
X-offset:是指阴影水平偏移量其值可以是正负值可以取正负值,如果值为正值,则阴影在对象的右边,反之其值为负值时,阴影在对象的左边
Y-offset:是指阴影的垂直偏移量,其值也可以是正负值,如果为正值,阴影在对象的底部,反之其值为负值时,阴影在对象的顶部
阴影模糊半径:此参数是可选,,但其值只能是为正值,如果其值为0时,表示阴影不具有模糊效果,其值越大阴影的边缘就越模糊
阴影扩展半径:此参数可选,其值可以是正负值,如果值为正,则整个阴影都延展扩大,反之值为负值是,则缩小
阴影颜色:此参数可选,如果不设定任何颜色时,浏览器会取默认色,但各浏览器默认色不一样
box-sizing可以改变盒模型
通过逗号间隔,图片偏移,可以设置多背景
background:url("haoroomsCSS1_s.jpg") 0 0 no-repeat, url("haoroomsCSS2_s.jpg") 200px 0 no-repeat, url("haorooms.jpg") 400px 201px no-repeat;
偏移参考对象
规定背景的绘制区域
linear-gradient( [ <angle> | to <side-or-corner> ,]? <color-stop> [, <color-stop>]+ ) <side-or-corner> = [left | right] || [top | bottom] <color-stop> = <color> [ <percentage> | <length> ]//新颜色出现的位置
简单地可以概括为设置渐变轴位置,设置颜色及在轴上的位置
radial-gradient( [ [ circle || <length> ] [ at <position> ]? , | [ ellipse || [ <length> | <percentage> ]{2} ] [ at <position> ]? , | [ [ circle | ellipse ] || <extent-keyword> ] [ at <position> ]? , | at <position> , ]? <color-stop> [ , <color-stop> ]+ ) where <extent-keyword> = closest-corner | closest-side | farthest-corner | farthest-side and <color-stop> = <color> [ <percentage> | <length> ]?
通过规定图形形状及其中心位置、颜色节点就可以完成一个基础的辐射。参数中,图形相关的参数按顺序以空格间隔,颜色节点用逗号间隔。
径向渐变生成器
</br>
</br>
<single-transition> = [ none | <single-transition-property> ] || <duration time> || <single-transition-timing-function> || <delay time> <single-transition-property> = all | <custom-ident> <single-transition-timing-function> = ease | linear | ease-in | ease-out | ease-in-out | step-start | step-end | steps( <integer> [, [ start | end ] ]? ) | cubic-bezier( <number>, <number>, <number>, <number> )
变化曲线
ease 激进到渐缓
linear 线性
ease-in 缓进到线性
ease-out 线性到缓出
step-start 等同于 steps(10,start) 动画分成10步,动画执行时为开始左侧端点的部分为开始。
step-end 等同于 steps(10,end) 动画分成10步,动画执行时以结尾端点为开始,默认值为 end。
ease-in-out 缓进到线性到缓出
cubic-bezier 自定义贝塞尔曲线
自定义贝塞尔曲线生成器
<single-animation># where <single-animation> = <time> || <single-timing-function> || <time> || <single-animation-iteration-count> || <single-animation-direction> || <single-animation-fill-mode> || <single-animation-play-state> || [ none | <keyframes-name> ] where <single-timing-function> = <single-transition-timing-function> <single-animation-iteration-count> = infinite | <number> <single-animation-direction> = normal | reverse | alternate | alternate-reverse <single-animation-fill-mode> = none | forwards | backwards | both <single-animation-play-state> = running | paused <keyframes-name> = <custom-ident> | <string> where <single-transition-timing-function> = ease | linear | ease-in | ease-out | ease-in-out | step-start | step-end | steps( <integer> [, [ start | end ] ]? ) | cubic-bezier( <number>, <number>, <number>, <number> )
@keyframs keyname{} //设置关键帧 0% { background: #c00; } 50% { background: orange; } 100% { background: yellowgreen; } } div{ animation: 1s keyname infinite;//时间 动画名 次数 }
动画结束以后,会立即从结束状态跳回到起始状态。如果想让动画保持在结束状态,需要使用animation-fill-mode属性。
none:默认值,回到动画没开始时的状态
forwards:让动画停留在结束状态
backwards:让动画回到第一帧的状态
both: 根据animation-direction轮流应用forwards和backwards规则
动画循环播放时,每次都是从结束状态跳回到起始状态,再开始播放。animation-direction属性,可以改变这种行为
normal
alternate 循环往复
reverse 颠倒运动方向
alternate-reverse
transform
改变旋转中心
平移
translateX(),translateY()可以改变特定轴
缩放
scaleX()、scaleY()
transform:skewX(10deg)、transform:skewY(10deg
倾斜
视距,越大3D效果越不明显
变形、动画工具:
焦点
如对本文有疑问,请在下面进行留言讨论,广大热心网友会与你互动!! 点击进行留言回复
css3 flex布局 justify-content:space-between 最后一行左对齐
网友评论