-
background-size 设置背景图片的大小,以长度值或百分比显示,还可以通过cover和contain来对图片进行伸缩。 语法: background-size: auto | <长度值> | <百分比> | cover | contain 取值说明: 1、auto:默认值,不改变背景图片的原始高度和宽度; 2、<长度值>:成对出现如200px 50px,将背景图片宽高依次设置为前面两个值,当设置一个值时,将其作为图片宽度值来等比缩放; 3、<百分比>:0%~100%之间的任何值,将背景图片宽高依次设置为所在元素宽高乘以前面百分比得出的数值,当设置一个值时同上; 4、cover:顾名思义为覆盖,即将背景图片等比缩放以填满整个容器; 5、contain:容纳,即将背景图片等比缩放至某一边紧贴容器边缘为止。查看全部
-
background-clip 用来将背景图片做适当的裁剪以适应实际需要。 语法: background-clip : border-box | padding-box | content-box | no-clip 参数分别表示从边框、或内填充,或者内容区域向外裁剪背景。no-clip表示不裁切,和参数border-box显示同样的效果。backgroud-clip默认值为border-box。查看全部
-
background-origin background-origin 设置元素背景图片的原始起始位置。 语法: background-origin : border-box | padding-box | content-box; 参数分别表示背景图片是从边框,还是内边距(默认值),或者是内容区域开始显示。需要注意的是,如果背景不是no-repeat,这个属性无效,它会从边框开始显示。查看全部
-
嵌入字体@font-face @font-face能够加载服务器端的字体文件,让浏览器端可以显示用户电脑里没有安装的字体。 语法: @font-face { font-family : 字体名称; src : 字体文件在服务器上的相对或绝对路径; } 这样设置之后,就可以像使用普通字体一样在(font-*)中设置字体样式。 比如: p { font-size :12px; font-family : "My Font"; /*必须项,设置@font-face中font-family同样的值*/ }查看全部
-
1.text-overflow用来设置是否使用一个省略标记(...)标示对象内文本的溢出。 2.语法: text-overflow:clip|ellipsis(剪切/表示显示省略标记) 3.实现溢出时产生省略号的效果: text-overflow:ellipsis; overflow:hidden; //溢出内容为隐藏 white-space:nowrap; //强制文本在一行内显示 4.word-wrap:设置文本行为,当前行超过指定容器的边界时是否断开转行。 语法:world-wrap:normal|break-word(表示控制连续文本换行|表示内容将在边界内换行),其中normal为浏览器默认值(此属性不常用)查看全部
-
background: linear-gradient(to 方向,颜色1,颜色2...); 方向 1.left 从右到左 数值为: 270deg 2.right 从左到右 数值为: 90deg 3.top 从下到上 数值为: 0 4.bottom 从上到下 数值为: 180deg 默认值 左上角 - 右下角 只需填写右下角名称即可 例如 linear-gradient(to bottom right,颜色1,颜色2...); 颜色1 为起始颜色 颜色2 为终点颜色 可以设置2个颜色以上的值,不少于2个查看全部
-
颜色之RGBA RGB是一种色彩标准,是由红(R)、绿(G)、蓝(B)的变化以及相互叠加来得到各式各样的颜色。RGBA是在RGB的基础上增加了控制alpha透明度的参数。 语法: color:rgba(R,G,B,A) 以上R、G、B三个参数,正整数值的取值范围为:0 - 255。百分数值的取值范围为:0.0% - 100.0%。超出范围的数值将被截至其最接近的取值极限。并非所有浏览器都支持使用百分数值。A为透明度参数,取值在0~1之间,不可为负值。查看全部
-
为边框应用图片 border-image 顾名思义就是为边框应用背景图片,它和我们常用的background属性比较相似。例如: background:url(xx.jpg) 10px 20px no-repeat; border-image:url(border.png) 70 70 70 70 repeat 70:切割图片的宽度,单位为像素,但是省略px也可以使用百分比,遵循顺时针的规律来分别设置。也可以简写为70 图片延伸方式:round(平铺) repeat(重复) stretch(拉伸) repeat 参数:就是一直重复,然后超出部分剪裁掉,而且是居中开始重复。 round 参数:round可以理解为圆满的铺满。为了实现圆满所以会压缩(或拉伸)。 Stretch 很好理解就是拉伸,有多长拉多长。有多远“滚”多远。查看全部
-
阴影 box-shadow(二) 1、阴影模糊半径与阴影扩展半径的区别 阴影模糊半径:此参数可选,其值只能是为正值,如果其值为0时,表示阴影不具有模糊效果,其值越大阴影的边缘就越模糊; 阴影扩展半径:此参数可选,其值可以是正负值,如果值为正,则整个阴影都延展扩大,反之值为负值时,则缩小; 2、X轴偏移量和Y轴偏移量值可以设置为负数 box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式];查看全部
-
box-shadow是向盒子添加阴影。 box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式]; 值 描述 X轴偏移量:必需。水平阴影的位置。允许负值。 Y轴偏移量:必需。垂直阴影的位置。允许负值 阴影模糊半径:可选。模糊距离 如果添加多个阴影,只需用逗号隔开即可。 阴影扩展半径:可选。阴影的尺寸。 阴影颜色:可选。阴影的颜色。省略默认为黑色。 投影方式:可选。(设置inset时为内部阴影方式,如果省略则为外部阴影方式)。 注意:inset 可以写在参数的第一个或最后一个,其它位置是无效的。 如果添加多个阴影,只需用逗号隔开即可。查看全部
-
CSS3能做什么? 选择器 以前我们通常用class、 ID 或 tagname 来选择HTML元素,CSS3的选择器强大的难以置信。它们可以减少在标签中的class和ID的数量更方便的维护样式表、更好的实现结构与表现的分离。 圆角效果 以前做圆角通常使用背景图片,或繁琐的元素拼凑,现在很简单了 border-radius 帮你轻松搞定。 块阴影与文字阴影 可以对任意DIV和文字增加投影效果。 色彩 CSS3支持更多的颜色和更广泛的颜色定义。新颜色CSS3支持HSL , CMYK ,HSLA and RGBA。 渐变效果 以前只能用Photoshop做出的图片渐变效果,现在可以用CCS写出来了。IE中的滤镜也可以实现。 个性化字体 网页上的字体太单一?使用@Font-Face 轻松实现定制字体。 多背景图 一个元素上添加多层背景图片。 边框背景图 边框应用背景图片。 变形处理 你可以对HTML元素进行旋转、缩放、倾斜、移动、甚至以前只能用JavaScript实现的强大动画。 多栏布局 可以让你不用使用多个div标签就能实现多栏布局。浏览器解释这个属性并生成多栏,让文本实现一个仿报纸的多栏结构。 媒体查询 针对不同屏幕分辨率,应用不同的样式。查看全部
-
在编写CSS3样式时,不同的浏览器可能需要不同的前缀。它表示该CSS属性或规则尚未成为W3C标准的一部分,是浏览器的私有属性,虽然目前较新版本的浏览器都是不需要前缀的,但为了更好的向前兼容前缀还是少不了的。 前缀 浏览器 -webkit chrome和safari -moz firefox -ms IE -o opera查看全部
-
阴影 box-shadow(二) 1、阴影模糊半径与阴影扩展半径的区别 阴影模糊半径:此参数可选,其值只能是为正值,如果其值为0时,表示阴影不具有模糊效果,其值越大阴影的边缘就越模糊; 阴影扩展半径:此参数可选,其值可以是正负值,如果值为正,则整个阴影都延展扩大,反之值为负值时,则缩小; 2、X轴偏移量和Y轴偏移量值可以设置为负数 box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式];查看全部
-
盒子模型:box-sizing 在CSS中盒模型被分为两种,第一种是w3c的标准模型,另一种是IE的传统模型查看全部
-
::selection 改变网页选中文本的背景和文字颜色查看全部
举报
0/150
提交
取消