资讯专栏INFORMATION COLUMN

css3整理

X1nFLY / 1337人阅读

W3C的CSS3规范仍在开发,但是,许多新的CSS3属性已在现代浏览器使用

CSS3边框
border-radius
    border-top-left-radius: 2em 0.5em
box-shadow:x-shadow y-shadow blur spread(阴影尺寸,可选) color inset(outset外部阴影,可选)
border-image
    border-image-source:设置或检索对象的边框是否用图像定义样式或图像来源路径
    border-image-slice:设置或检索对象的边框背景图的分割方式
    border-image-width:设置或检索对象的边框厚度
    border-image-outset:设置或检索对象的边框背景图的扩展
    border-image-repeat:stretch/repeat/round;设置或检索对象的边框图像的平铺方式
CSS3背景
background-image背景图片
background-color;背景颜色
background-repeat:背景重复
background-position:背景定位
background-attachment:scroll/fixed;背景固定
background-size:x y/100% 100%/cover(比例放大)/contain(包含,图片不溢出)
background-origin:border-box/padding-box/content-box;背景区域定位
background-clip:border-box/padding-box/content-box/no-clip;背景绘制区域
CSS3渐变
linear-gradient:left/top/right/bottom/left top.../0-360deg(起点/角度),颜色,位置red 50% blue 100%
radial-gradient:(起点(圆心位置),形状/半径/大小,颜色1,颜色2);径向渐变
    起点:left/top/right/bottom
    形状:ellipsis/circle
    大小:数值或百分比
repeating-linear-gradient线性渐变重复平铺
    IE低版本渐变(滤镜):
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff",endColorstr="#000000",GradientType="1");
repeating-radial-gradient
CSS3字体
@font-face
CSS3 2D转换
transform:translate(),rotate(),scale(),skew(),matrix()
CSS3 3D转换
rotateX()
rotateY()
rotateZ()
translateZ()
scaleZ()
CSS3过渡
transition:property duration timing-function delay;
    transition-property:none/all/property
    transition-duration:time;
    transition-timing-function:linear/ease/ease-in-out/ease-in/ease-out/cubic-bezier;
CSS3动画
@keyframes,
animation(
animation-name,animation-duration,animation-timing-function,animation-delay,animation-direction,animation-play-state,animation-iteration-count
)
CSS3多列
column-count
column-gap
column-rule-style
column-rule-width
column-rule-color
column-rule
column-span
column-width
CSS3用户界面
resize
box--sizing
outline-offset
CSS3框大小
box-sizing:border-box;(content-box)
CSS3弹性盒子
display:box或者display:inline-box;设置给父元素
box-orient:horizontal/vertical;定义盒模型的布局方向,设置给父元素
box-direction:normal/reverse;元素排列顺序,设置给父元素
box-ordinal-group:number;子元素的显示次序,设置给子元素
display:flex;弹性盒子布局
[flex布局教程:语法篇][1]
[flex布局教程:实力篇][2]
CSS3多媒体查询
@media screen and (min-width: 480px)
CSS3文本属性
color:rgba();
text-overflow:是否使用一个省略标记(...)标示对象内文本的溢出
    text-overflow:clip;//默认值,无省略号
    text-overflow:ellipsis//当文本溢出时显示省略标记(...)
    PS:该属性需配合overflow:hidden(超出处理)属性和white-space:nowrap(禁止换行)配合使用,否则无法看到效果
text-align:文本的对齐方式
    text-align:left/right/center/justify(两端对齐);//CSS1
    text-align:start(开始边界对齐)/end(结束边界对齐);//CSS3
text-transform:文字的大小写
    text-transform:none/capitalize(每个单词的第一个单词转换成大写)/uppercase/lowercase;//CSS1
    text-transform:full-width(将左右字符设为全角形式。不支持)/full-size-kana(将所有小假名字符转换成普通假名。不支持)
text-decoration:文本的装饰线
    复合属性只有火狐支持
    text-decoration:text-decoration-line text-decoration-style text-decoration-color blink;
    实例 text-decoration:#f00 double overline;
text-shadow:文本阴影
    text-shadow:x y blur color;
text-fill-color:文字填充颜色
text-stroke:设置文字的描边,复合属性
    text-stroke-width:文字的描边厚度
    text-stroke-color:文字的描边颜色
tab-size:制表符的长度
    默认值为8;
word-wrap:当前行超过指定容器的边界时是否断开转行
    word-wrap:normal/break-word(允许长单词换行到下一行)
word-break:规定自动换行的处理方法
    word-break:normal/break-all(允许在单词内部换行)/keep-all(只能在半角空格或连字符处换行)
CSS伪类选择器
UI伪类选择器
    :enabled选择启用状态的元素
    :disabled选择禁用状态的元素
    :checked选择被选中的input元素(单选按钮或复选框)
    :default选择默认元素
    :valid/invalid根据输入验证选择有效或无效的input元素
    :in-range/out-of-range选择指定范围之内或者之外受限的元素
    :required/optional根据是否允许:required属性选择input元素
动态伪类选择器
    :link选择链接元素
    :visited选择用户已访问的元素
    :hover鼠标悬停其上的元素
    :active鼠标点击时触发的事件
    :focus当前获取焦点的元素
其他伪类选择器
    :not(<选择器>)对括号内选择器的选择取反
    :lang(<目标语言>)基于lang全局属性的元素
    :target url片段标示符指向的元素
    :empty选择内容为空的元素
    :selection鼠标光标选择元素内容

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/111566.html

相关文章

  • CSS3 效果资源收集整理

    摘要:纯,不使用,能实现怎样的视觉效果这里收集整理了一些相关资源与工具,欢迎各位补充。出品的纯框架,体积小巧。仅一个标签实现的纯图标库。一个令人印象深刻的图片悬停效果集合,完全基于实现。纯模拟移动设备纯实现模态框使用库把图像转换成属性。 awesome-pure-css-no-javascript 纯 CSS + HTML,不使用 JavaScript,能实现怎样的视觉效果? 这里收集整理...

    fancyLuo 评论0 收藏0
  • CSS3 效果资源收集整理

    摘要:纯,不使用,能实现怎样的视觉效果这里收集整理了一些相关资源与工具,欢迎各位补充。出品的纯框架,体积小巧。仅一个标签实现的纯图标库。一个令人印象深刻的图片悬停效果集合,完全基于实现。纯模拟移动设备纯实现模态框使用库把图像转换成属性。 awesome-pure-css-no-javascript 纯 CSS + HTML,不使用 JavaScript,能实现怎样的视觉效果? 这里收集整理...

    lyning 评论0 收藏0
  • CSS3 效果资源收集整理

    摘要:纯,不使用,能实现怎样的视觉效果这里收集整理了一些相关资源与工具,欢迎各位补充。出品的纯框架,体积小巧。仅一个标签实现的纯图标库。一个令人印象深刻的图片悬停效果集合,完全基于实现。纯模拟移动设备纯实现模态框使用库把图像转换成属性。 awesome-pure-css-no-javascript 纯 CSS + HTML,不使用 JavaScript,能实现怎样的视觉效果? 这里收集整理...

    zhaofeihao 评论0 收藏0
  • 基础知识:css3核心知识整理

    摘要:前缀浏览器兼容根据了解,属性大部分支持,部分支持,少部分支持前缀苹果谷歌火狐浏览器世界之窗例如兼容转换过渡关键帧动画转换及以上支持,需添加前缀属性的方法使用缩放轴缩放倍,轴缩放倍,只有一个值时为缩放倍数倾 css3前缀(浏览器兼容) 根据了解,css3属性大部分支持ie10,部分支持ie9,少部分支持ie8 // 前缀 // -webkit- Safari and Chrome(...

    kycool 评论0 收藏0
  • 自己整理css3动画库,附下载链接

    摘要:动画以低速开始,然后加快,在结束前变慢。在函数中自己的值。在所指定的一段时间内,在动画显示之前,应用开始属性值在第一个关键帧中定义。动画调用语法 animation: bounceIn 0.3s ease 0.2s 1 both; 按顺序解释参数: 动画名称 如:bounceIn 一周期所用时间 如:0.3s 速度曲线 如:ease 值 描述 linear 动画从头...

    Darkgel 评论0 收藏0

发表评论

0条评论

X1nFLY

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<