CSS权威指南阅读笔记第九章02

简介: 渐变

渐变

渐变是指从一个颜色到另一个颜色的平滑过渡;
渐变是图像,尽管渐变是通过CSS实现的,但是每一点都有svg,png,gif等图片一样;
有两种渐变类型:线性渐变和径向渐变;这两种渐变又各分为二:循环渐变和不循环渐变。
渐变可以用在任何可以使用图像的地方;
默认情况下,渐变背景将填满整个背景定位区域;

  • 线性渐变:
    线性渐变值沿线性向量填充得到的渐变。整个向量称为梯度线;
    基本语法:
    linear-gradient([[angle | to side-or-quadrant]]? color-stop [,color-hint]? color-stop)
    
    开头是一个可选的方向,然后是一系列色标和中色点,结尾又是一个色标;

    渐变的默认方向是从上到下(to bottom);
    渐变的颜色不限于两个;多少个都可以;色标之间不同的颜色尽量平滑混合;各颜色均匀分布在梯度线上;

  • 径向渐变
    径向渐变也叫做圆形渐变;
    基本语法
    radial-gradient([[shape|size] [at position]] color-stop coloe-hint color-stop)
    
    可以声明形状和尺寸,可以声明渐变的中心点,然后声明两个或多个色标,色标之间可以指定中色点;

位置不声明,则默认是center,
形状除了方形元素外都是椭圆形,方形元素为圆形;只有两个值;

盒子投影box-shadow

box-shadow取值有:

none| [inset? && lenght{
   2,4} && color?]#

默认值是none,即不显示;

长度值最多可以有四个;第一个定义横向偏移,第二个定义纵向偏移;正数把投影向下和向右移动,负数把投影向上或向左移动;
如果提供第三个值,定义的是模糊距离,即指定给模糊留出多少空间;第四个值定义展开距离,改变投影的尺寸;

如果在box-shadow属性的值中加上inset,投影在框体内部渲染,不在浮动在画布之上,而像是向内凹陷;inset关键字可以在其他值前面,也可以在后面,唯独不可以在长度和颜色直接。

一个元素可以应用任意多个盒子投影,各投影之间以逗号分隔;

相关文章
|
2月前
|
JavaScript 前端开发 开发者
编程笔记 html5&css&js 071 JavaScript Symbol 数据类型
编程笔记 html5&css&js 071 JavaScript Symbol 数据类型
|
15天前
|
XML 编解码 前端开发
css设计文本样式 前端开发入门笔记(十二)
css设计文本样式 前端开发入门笔记(十二)
6 0
|
15天前
|
Web App开发 XML 前端开发
CSS中的非布局样式+CSS布局 前端开发入门笔记(十一)
CSS中的非布局样式+CSS布局 前端开发入门笔记(十一)
31 0
|
15天前
|
移动开发 前端开发 JavaScript
CSS选择器 前端开发入门笔记(十)
CSS选择器 前端开发入门笔记(十)
20 1
|
15天前
|
编解码 前端开发 iOS开发
前端开发入门笔记(八)CSS3属性详解:动画详解+Flex布局图文详解+Web字体
前端开发入门笔记(八)CSS3属性详解:动画详解+Flex布局图文详解+Web字体
57 1
|
15天前
|
前端开发 容器
CSS3属性详解(一)文本 盒模型中的 box-ssize 属性 处理兼容性问题:私有前缀 边框 背景属性 渐变 前端开发入门笔记(七)
CSS3属性详解(一)文本 盒模型中的 box-ssize 属性 处理兼容性问题:私有前缀 边框 背景属性 渐变 前端开发入门笔记(七)
27 2
|
15天前
|
前端开发 JavaScript 容器
CSS属性:定位属性+案例讲解:博雅互动 前端开发入门笔记(五)
CSS属性:定位属性+案例讲解:博雅互动 前端开发入门笔记(五)
16 1
|
15天前
|
前端开发 JavaScript UED
CSS3选择器详解 前端开发入门笔记(六)
CSS3选择器详解 前端开发入门笔记(六)
35 1
|
15天前
|
前端开发 搜索推荐 数据安全/隐私保护
HTML标签详解 HTML5+CSS3+移动web 前端开发入门笔记(四)
HTML标签详解 HTML5+CSS3+移动web 前端开发入门笔记(四)
21 1
|
15天前
|
移动开发 前端开发 搜索推荐
HTML图片标签(2) HTML5+CSS3+移动web 前端开发入门笔记(三)
HTML图片标签(2) HTML5+CSS3+移动web 前端开发入门笔记(三)
21 0