CSS3
轻水与猫
这个作者很懒,什么都没留下…
展开
-
CSS3-边框
圆角 border-radius 四个半径值分别是左上角、右上角、右下角和左下角,顺时针 阴影 box-shadow阴影模糊半径:此参数可选,其值只能是为正值,如果其值为0时,表示阴影不具有模糊效果,其值越大阴影的边缘就越模糊;阴影扩展半径:此参数可选,其值可以是正负值,如果值为正,则整个阴影都延展扩大,反之值为负值时,则缩小;X Y偏移量可以是负数为边框应用图片 border-image :...原创 2018-03-01 18:24:08 · 163 阅读 · 0 评论 -
CSS3--布局
columns : <column-width>(列宽) || <column-count>(列数)column-count : number(指定列数) | auto(取决于其他属性如 “column-width”)column-fill:column-gap:指定列之间的差距 length| normalcolumn-rule:指定列之间的规则:宽度,样式,颜色 c...原创 2018-03-04 12:49:47 · 160 阅读 · 0 评论 -
CSS3--伸缩布局 Flexbox
display:flex | inline-flexhttp://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool弹性盒子是 CSS3 的一种新的布局模式。CSS3 弹性盒( Flexible Box 或 flexbox),是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。引入弹...原创 2018-03-04 15:15:54 · 168 阅读 · 0 评论 -
CSS3--变形与动画
关键帧 Keyframes以@keyframes 开头后面紧跟动画名称,中间可以有多个百分比当在@keyframe创建动画,把它绑定到一个选择器,否则动画不会有任何效果。指定至少这两个CSS3的动画属性绑定向一个选择器:语法:@keyframes animationname {keyframes-selector {css-styles;}}animation-iteration-count 如...原创 2018-03-03 20:46:39 · 313 阅读 · 0 评论 -
CSS3--变形(transform)
旋转 transform:rotate(deg)deg为正值元素就绕着中心顺时针旋转,允许复制。元素必须为块元素扭曲 skew(x,y) 不会改变元素的形状,让元素倾斜显示,有三种情况:1、skew(x,y) 是元素在水平和垂直方向同时扭曲2、skewX(x):水平方向扭曲3skewY(y):垂直方向扭曲缩放scale() 让元素根据中心原点对对象进行缩放 scale(x,y),scaleX(),...原创 2018-03-03 19:15:20 · 683 阅读 · 0 评论 -
CSS3--选择器(下)
不可用|可用的表单元素 :disabled|:enabled 单选按钮,复选按钮 :checked(选中)匹配突出显示的文本 ::selection浏览器默认情况下,用鼠标选择网页文本是以“深蓝的背景,白色的字体”显示的有的时候设计要求,不使用上图那种浏览器默认的突出文本效果,需要一个与众不同的效果,此时“::selection”伪元素就非常的实用指定处于只读状态元素的样式 :re...原创 2018-03-03 15:55:05 · 139 阅读 · 0 评论 -
CSS3-选择器
属性选择器:伪类选择器-root(根选择器):root 等同于 html效果相等伪类选择器-notdiv:not([id="box"])伪类选择器-empty 将没有任何内容的元素隐藏起来p:empty{display:none} :target 目标选择器,URL 带有后面跟有锚名称 #,指向文档内某个具体的元素。这个被链接的元素就是目标元素(target element)。:target ...原创 2018-03-02 15:57:17 · 140 阅读 · 0 评论 -
CSS3--背景
设置元素背景图片原始起始位置 background-origin : border-box|padding-box|content-box参数分别是 :表示背景图片是从边框,还是内边距(默认),或者是内容区如果背景不是no-repeat,这个属性无效,他会从边框开始background-clip 将背景图片作适当剪裁以适应需要background-clip : border-box|paddin...原创 2018-03-01 20:46:37 · 183 阅读 · 0 评论 -
CSS3-文字与字体
text-overflow 用来设置是否使用省略标记标示对象内溢出的文本 clip表示剪切,ellipsis表示省略号隐藏要实现溢出时产生省略号的效果,还须定义强制文本在一行内显示(white-space:nowrap)及溢出内容为隐藏(overflow:hidden),只有这样才能实现溢出文本显示省略号的效果嵌入字体 font-face:能够加载服务器端的字体文件,让浏览器端可以显示用户电脑没有...原创 2018-03-01 19:02:55 · 565 阅读 · 0 评论 -
CSS3-颜色
渐变 background-image : linear-gradient( )参数: 第一个参数用来制定方向,可以用角度或者英文来表示,省略时默认为180deg 第二第三个参数用来表示起始颜色和终止颜色,可以有多个参数background-image:linear-gradient(to left, red, orange,yellow,green,blue,indigo,...原创 2018-03-01 18:42:05 · 280 阅读 · 0 评论 -
CSS3--盒子模型
box-sizing : content-box | border-boxcontent-box :W3C盒子模型 内容内边距边框会将元素撑大border-box:IE盒模型 内容不会把元素撑大原创 2018-03-04 12:52:17 · 128 阅读 · 0 评论