欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

常用CSS3属性整理

程序员文章站 2022-04-15 19:53:34
常用CSS3属性整理 文本 文本超出部分折叠 white-space:nowarp; overflow:hidden; text-overflow:ellipsis word-warp 边界换行 normal 默认 break-word 内容将在边界内换行，仅用于块对象，内联对象要用的话，必须要设定 ......

常用CSS3属性整理

文本

文本超出部分折叠

white-space:nowarp;
overflow:hidden;
text-overflow:ellipsis

word-warp

边界换行

  • normal 默认
  • break-word 内容将在边界内换行，仅用于块对象，内联对象要用的话，必须要设定height、width或display:block或position:absolute。

word-break:

处理单词折断

  • normal 使用浏览器默认的换行规则。
  • break-all 允许在单词内换行
  • keep-all 只能在半角空格或连字符处换行

white-space

white-space 属性设置如何处理元素内的空白(空格)

  • normal 默认。连续空白会被浏览器忽略
  • pre 连续空白会被浏览器保留(保留原文本空白，换行符)
  • nowrap 文本不会换行，直到遇到标签
  • pre-wrap 保留原文本空白，但正常换行
  • pre-line 合并连续空白，打算保留换行符
  • inherit 继承自父元素

text-shadow

文本阴影

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

  • 圆角半径值border-radius:5px
  • 角收缩率border-radius:50%//标准圆
  • 按对角设置border-radius:5px(主对角线) 25px(次对角线);
  • 逐一设置border-radius:10px 20px 30px 40px(从左上起顺时针);

border-image

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的倍数

边框图片设置生存器
http://border-image.com/

box

box-shadow

box-shadow:inset x-offset y-offset blur-radius spread-radius color

  • 阴影类型：此参数是一个可选值，如果不设值，其默认的投影方式是外阴影；如果取其唯一值inset,就是将外阴影变成内阴影

  • X-offset:是指阴影水平偏移量其值可以是正负值可以取正负值，如果值为正值，则阴影在对象的右边，反之其值为负值时，阴影在对象的左边

  • Y-offset:是指阴影的垂直偏移量，其值也可以是正负值，如果为正值，阴影在对象的底部，反之其值为负值时，阴影在对象的顶部

  • 阴影模糊半径：此参数是可选，，但其值只能是为正值，如果其值为0时，表示阴影不具有模糊效果，其值越大阴影的边缘就越模糊

  • 阴影扩展半径：此参数可选，其值可以是正负值，如果值为正，则整个阴影都延展扩大，反之值为负值是，则缩小

阴影颜色：此参数可选，如果不设定任何颜色时，浏览器会取默认色，但各浏览器默认色不一样

box-sizing

box-sizing可以改变盒模型

  • content-box：标准盒模型
    width = content width
  • border-box：IE盒模型
    width = content width + paddingLeft + borderLeft + paddingRight + borderRight

background

多背景

通过逗号间隔，图片偏移，可以设置多背景

background:url("haoroomsCSS1_s.jpg") 0 0 no-repeat,
         url("haoroomsCSS2_s.jpg") 200px 0 no-repeat,
         url("haorooms.jpg") 400px 201px no-repeat;

background-size

  • length:设置背景图像的高度和宽度，第一个值设置宽度，第二个值设置高度，如果只设置一个值，则第二个值会被设置为auto
  • percentage: 以父元素的百分比来设置背景图像的宽度和高度。第一个值设置宽度，第二个值设置高度，如果只设置一个值，则第二个值会被设置为auto
  • contain 缩放背景图片以完全装入背景区，可能背景区部分空白。
  • cover 缩放背景图片以完全覆盖背景区，可能背景图片部分看不见。

background-origin

偏移参考对象

  • padding-box
  • border-box
  • content-box

background-clip

规定背景的绘制区域

  • padding-box
  • border-box
  • content-box
    </br>
    </br>

渐变

线性渐变

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> ]?

通过规定图形形状及其中心位置、颜色节点就可以完成一个基础的辐射。参数中，图形相关的参数按顺序以空格间隔，颜色节点用逗号间隔。
径向渐变生成器http://www.colorzilla.com/gradient-editor/
</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 自定义贝塞尔曲线

自定义贝塞尔曲线生成器 http://cubic-bezier.com/

动画

<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

动画结束以后，会立即从结束状态跳回到起始状态。如果想让动画保持在结束状态，需要使用animation-fill-mode属性。
none：默认值，回到动画没开始时的状态
forwards：让动画停留在结束状态
backwards：让动画回到第一帧的状态
both: 根据animation-direction轮流应用forwards和backwards规则

animation-direction

动画循环播放时，每次都是从结束状态跳回到起始状态，再开始播放。animation-direction属性，可以改变这种行为
normal
alternate 循环往复
reverse 颠倒运动方向
alternate-reverse

变形及3D

transform

transform-origin

改变旋转中心

transform:translate()

平移
translateX()，translateY()可以改变特定轴

transform:scale()

缩放
scaleX()、scaleY()

transform:skew()

transform:skewX(10deg)、transform:skewY(10deg
倾斜

perspective

视距，越大3D效果越不明显
变形、动画工具：http://isux.tencent.com/css3/tools.html

perspective origin

焦点

来源：https://www.jianshu.com/p/72d100146c9c

上一篇： 由AbstractQueuedSynchronizer和ReentrantLock来看模版方法模式

下一篇： 大数据时代下电网标准越来越细

推荐阅读