颜色
CSS 中可以改变文字的颜色还有元素的背景颜色. 可以用颜色关键字来定义颜色, 如 red, 但是这些颜色关键字并不常用.
transparent
transparent 可以让文字或背景变的完全透明的颜色, 它就像 rgba(0,0,0,0)的缩写.
currentColor
currentColor 代表原始的 color 属性的计算值. 比如当前元素 color 为红色, 背景色设置为 currentColor, 那么现在背景色也为红色.
rgb,rgba
颜色还可以用 rgb 函数表示, 如 rgb(255, 255, 255)代表白色, 它每个参数的取值范围是 0 到 255, 它是用不同比例的红, 绿, 蓝来组成期望颜色.
rgba 函数代表红 - 绿 - 蓝 - 阿尔法, 其中的 a 是透明度, 取值范围是 0 到 1.
除了使用 rgb 函数, 还可以使用 16 进制来表示, 它的语法是 #RRGGBB, 如果 #f3f3f3, 代表 f3(16 进制)数量的红 - 绿 - 蓝. 如果红 - 绿 - 蓝数值两两相等, 如 #ffffff, 就可以简写成 3 位 16 进制的形式 #fff. 在高版本的浏览器还可以用 16 进制表示透明度 #RRGGBBAA,AA 的取值范围是 0 到 255, 如果两两相等也可以简写成 #RGBA 形式.
hsl,hsla
hsl 函数是用色相 - 饱和度 - 明度 (Hue-saturation-lightness) 来表示颜色, HSL 相比 RGB 的优点是更加直观: 你可以估算你想要的颜色, 然后微调, 比如要找到一个颜色的相近色, 只需调整一下明度就行了.
色相 (Hue) 表示色环 (即代表彩虹的一个圆环) 的一个角度. 这个角度作为一个无单位的 被给出, 大致按照数值红, 橙, 黄, 绿, 青, 蓝, 紫变化节奏. 取值范围是 0 到 360
饱和度, 取值 0% 到 100%,100% 是满饱和度, 而 0% 是一种灰度. 明度, 取值 0% 到 100%,100% 明度是白色, 0% 明度是黑色, 而 50% 明度是 "一般的".
hsla 和 rgba 相似其中的 a 设置透明度, 取值范围也是 0 到 1.
系统颜色
系统颜色就是系统的颜色, 不同的系统支持的颜色可能不同, 一般很少使用. 但是我们可以利用它实现系统主题风格类似的 web 组件皮肤效果, 来以假乱真.
背景
CSS2.1 中有 5 个 background 属性可以用来控制元素的背景.
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
为了更好的驾驭背景图片, CSS3 添加了 3 个新的 background 相关属性.
- background-clip
- background-origin
- background-size
- background-blend-mode
CSS3 中还添加了多背景渐变等等新特性.
background-image
为元素设置一个或多个背景图像. background-image 在 background-color 之上, border 之下渲染. 也就是一个同时设置了 background-color 和 background-image 那么 background-image 会覆盖 background-color.
background-image 的值是一个图片或多个图片(用, 分隔).
- div {
- background-image: url("a.jpg"), url("b.jpg");
- }
- linear-gradient()
创建一个表示两种或多种颜色线性渐变的图片. CSS 渐变没有固定大小也没有固定宽高比, 它只等设置渐变角度, 渐变颜色和渐变梯度.
linear-gradient 的语法是[角度(角度或关键字)], 颜色 [梯度], 它们用, 分隔, 角度可选默认时从上到下渐变.
颜色关键字是 to left,to top,to left top 等位置关键字.
- div {
- background-image:
- linear-gradient(90deg, rgba(255, 255, 255, .5), orange 70%, #000),
- linear-gradient(red, orange 70%, #000);
- }
repeating-linear-gradient()
一个由重复线性渐变组成的图片. 它的语法和 linear-gradient 类似.
- div {
- background-image: repeating-linear-gradient(-45deg,
- transparent,
- transparent 25px,
- #000 25px,
- #000 50px);
- }
radial-gradient()
创建一个径向渐变 (由原点(渐变中心) 辐射开的颜色渐变)的图片.
radial-gradient()的语法是边缘轮廓的具体位置 形状 渐变中心后面是颜色用, 分隔.
- div {
- background: radial-gradient(circle closest-side at 50px 30px, yellow, red 5%, orange, #fff, #000);
- }
其中边缘轮廓的具体位置 形状 渐变中心都是可选.
形状值可以为 circle 和 ellipse 默认 ellipse.
渐变中心是 at 后的坐标点, 默认元素中心点.
边缘轮廓的具体位置可以为如下关键字:
closest-side 渐变中心距离容器最近的边作为终止位置.
closest-corner 渐变中心距离容器最近的角作为终止位置.
farthest-side 渐变中心距离容器最远的边作为终止位置.
farthest-corner 渐变中心距离容器最远的角作为终止位置.
默认是 farthest-corner.
- div {
- position: relative;
- width: 262px; height: 262px;
- border-radius: 50%;
- background: linear-gradient(30deg, transparent 40%, rgba(42, 41, 40, .85) 40%) no-repeat 100% 0, linear-gradient(60deg, rgba(42, 41, 40, .85) 60%, transparent 60%) no-repeat 0 100%, repeating-radial-gradient(#2a2928, #2a2928 4px, #ada9a0 5px, #2a2928 6px);
- background-size: 50% 100%, 100% 50%, 100% 100%;
- }
- div:after {
- position: absolute;
- top: 50%; left: 50%;
- margin: -35px;
- border: solid 1px #d9a388;
- width: 68px; height: 68px;
- border-radius: 50%;
- box-shadow: 0 0 0 4px #da5b33, inset 0 0 0 27px #da5b33;
- background: #b5ac9a;
- content: '';
- }
repeating-radial-gradient()
创建一个从原点辐射的重复渐变组成的图片 . 它类似于 radial-gradient 并且采用相同的参数, 但是它会在所有方向上重复颜色, 以覆盖其整个容器.
- div{
- background: repeating-radial-gradient(ellipse farthest-corner, red, black 5%, blue 5%, green 10%);
- }
conic-gradient()
创建一个锥形渐变的图片. conic 渐变类似于 radial 渐变, 但是它的颜色位于圆的周围.
它的语法是:[from 角度]? [at 位置]?, 颜色 角度...
- div{
- background: conic-gradient(from 0deg at 50px 100px, orange 0.2turn, #fff 0.09turn 0.3turn, orange 0.27turn 0.54turn);
- border-radius: 50%;
- }
background-repeat
定义背景图像的重复方式. 背景图像可以沿着水平轴, 垂直轴, 两个轴重复, 或者根本不重复.
它有 6 个值:
repeat-x 相当于 repeat no-repeat
repeat-y 相当于 no-repeat repeat
repeat 相当于 repeat repeat
space 相当于 space space
round 相当于 round round
no-repeat 相当于 no-repeat no-repeat
space
图像会尽可能得重复, 但是不会裁剪. 第一个和最后一个图像会被固定在元素 (element) 的相应的边上, 同时空白会均匀地分布在图像之间. background-position 属性会被忽视, 除非只有一个图像能被无裁剪地显示. 只在一种情况下裁剪会发生, 那就是图像太大了以至于没有足够的空间来完整显示一个图像.
round
随着允许的空间在尺寸上的增长, 被重复的图像将会伸展(没有空隙), 直到有足够的空间来添加一个图像. 当下一个图像被添加后, 所有的当前的图像会被压缩来腾出空间. 例如, 一个图像原始大小是 260px, 重复三次之后, 可能会被伸展到 300px, 直到另一个图像被加进来. 这样他们就可能被压缩到 225px.
性能
一般我们会用一个的背景小图片不断重复来达到一些效果, 为了请求优化一般会把小图片截取到 1px * 1px 大小, 但是这样渲染次数太多, 有时候会有明显的卡顿, 我们可以将尺寸截取大一点这样图片大小没大多少, 但是渲染性能却有明显提升.
background-blend-mode
定义该元素的背景图片, 以及背景色如何混合.
它就像 PS 中的混合模式. 可以做一些 正片叠底, 滤色等效果.
它的语法为, 单值或者双值(用, 分开).
它的值有:
- normal
- multiply
- screen
- overlay
- darken
- lighten
- color-dodge
- color-burn
- hard-light
- soft-light
- difference
- exclusion
- hue
- saturation
- color
- luminosity
- background-attachment
如果指定了 background-image , 那么 background-attachment 决定背景是在视口中固定的还是随包含它的区块滚动的.
它的值为:
scroll 默认值, 背景相对于元素本身固定, 而不是随着它的内容滚动
local 背景相对于元素的内容固定. 如果一个元素拥有滚动机制, 背景将会随着元素的内容滚动
fixed 背景相对于视口固定. 即使一个元素拥有滚动机制, 背景也不会随着元素的内容滚动.
我们一般只使用 fixed 这个值, 让背景图片不随着滚动而滚动.
background-position
为每一个背景图片设置初始位置. 属性被指定为一个或多个位置值, 用逗号隔开.
默认位置是 padding-box 的左上角.
它的值可以是 left,top 这些位置关键字, 还可以是长度值和百分比.
- div {
- background-position: 50% 10px, center, left bottom;
- /* 分别设置三张背景图片的位置 */
- }
- background-origin
指定背景图片 background-image 属性的原点位置的背景相对区域. 当使用 background-attachment 为 fixed 时, 该属性将被忽略不起作用.
它的值可以是:
padding-box 默认值 背景图片的摆放以 padding 区域为参考
border-box 背景图片的摆放以 border 区域为参考
content-box 背景图片的摆放以 content 区域为参考
background-clip
设置元素的背景 (背景图片或颜色) 是否延伸到边框下面.
它的值可以是:
border-box 默认值 背景延伸至边框外沿(但是在边框下层).
padding-box 背景延伸至内边距外沿. 不会绘制到边框处.
content-box 背景被裁剪至内容区外沿.
text 背景被裁剪成文字的前景色.
background-size
设置背景图片大小. 图片可以保有其原有的尺寸, 或者拉伸到新的尺寸, 或者在保持其原有比例的同时缩放到元素的可用空间的尺寸.
对于多背景用, 分隔.
它的值可以是长度值和百分比还有下面的关键字
auto 以背景图片的比例缩放背景图片
cover 缩放背景图片以完全覆盖背景区, 可能背景图片部分看不见. 和 contain 值相反
contain 缩放背景图片以完全装入背景区, 可能背景区部分空白
background
一种简写属性, 用于一次性集中定义各种背景属性. 它可以简写的属性有 background-clip,background-color,background-image,background-origin,background-position,background-repeat,background-size, 和 background-attachment.
简写的方式有:
- color
- image repeat
- box color
- repeat position[ / size]? image
- image position[ / size]? repeat attachment clip origin
- color image position[ / size]? repeat attachment clip origin
- clip-path
clip-path 用来剪切元素, 代替了现在已经弃用的剪切 clip 属性. 它创建一个剪切区域, 区域内的部分显示, 区域外的隐藏.
clip-path 的值可以为:
none
链接资源, 如
url(resources.svg#c1)
盒子值, 一共有 7 个
margin-box 使用 margin box 作为引用框
border-box 使用 border box 作为引用框
padding-box 使用 padding box 作为引用框
content-box 使用 content box 作为引用框
fill-box 利用对象边界框作为引用框
stroke-box 使用笔触边界框作为引用框
view-box 使用最近的 SVG 视口作为引用框
形状函数(相当于 SVG 中的形状元素)
- inset()
- circle()
- polygon()
- path()
盒子和形状结合值
clip-path: padding-box circle(50px at 0 100px);
clip-path 用的最多的值就属 polygon 函数, 它的参数由一堆 x y 坐标点组成.
如 clip-path: polygon(50% 0%, 0% 100%, 100% 100%);. 是一个三角形. 它可以接受无限个参数, 每个参数都是 x y 坐标, 最终显示的形状就是这些坐标连接成的形状.
clip-path 也可以使用 transition 属性让它有动画效果, 不过需要变动前后的坐标点数量必须相同.
这里推荐一下我的前端学习交流扣 qun:767273102 , 里面都是学习前端的从最基础的 html+CSS+JS[炫酷特效, 游戏, 插件封装, 设计模式] 到移动端 HTML5 的项目实战的学习资料都有整理, 送给每一位前端小伙伴. 2019 最新技术, 与企业需求同步. 好友都在里面学习交流, 每天都会有大牛定时讲解前端技术!
点击: 加入 http://u6.gg/srMpX
来源: http://www.bubuko.com/infodetail-3042612.html