这篇博客介绍了CSS的基础属性，包括字体、文本、背景和颜色的设置方法。字体属性涉及字体商用问题、特殊字体的Webfont使用、字体图标和兼容性。文本属性涵盖文字凹凸效果和文字溢出处理。背景属性讲解了精灵图的使用。颜色表示法包括RGB、RGBA、十六进制和HSLA。此外，还提到了CSS的兼容性和滤镜效果。
相关链接参照：
https://www.w3school.com.cn/ （w3c）
http://caibaojian.com/w3c/css/pr_list-style-type.html（w3c列表相关）
http://edu.jb51.net/ （菜鸟学堂）
http://www.js-code.com/ （脚本宝典）
https://fonts.safe.360.cn/ （360查字体 侵权）
常见属性包括字体、行高、颜色、大小、背景、边框、滚动、换行、装饰性属性（粗体、斜体、下划线）等
css相对单位包括像素(px)、印刷单位(em)相当于12个点
%、百分比(%)相对周围的文字大小css绝对单位：1
in=2.54cm=25.4mm=72pt=6pc
in：英寸Inches (1 英寸 = 2.54 厘米)
cm：厘米Centimeters
mm：毫米Millimeters
pt：点Points，或者叫英镑 (1点 = 1/72英寸)
pc：皮卡Picas (1 皮卡 = 12 点)
1.字体属性
line-height: 30px;
font: italic 400 14px/24px '宋体';【斜体 加粗 字号/行高 字体】
font-size: 50px;
font-family: 幼圆,黑体 ;
font-weight: bold; //【400是nomal,700是bold bolder lighter 100-900】
font-variant: small-caps; //【小写变大写 ， normal】--扩展：https://developer.mozilla.org/zh-CN/docs/Web/CSS/font-variant
font-style: italic; //【italic表示斜体(常用)，oblique(斜体) normal表示不倾斜】
@font-face { //文字特效 字体自定义属性
font-family: "字体名字"；
src: url("字体地址")
}// 字体自定义属性
/**例子1**/
<style>
@font-face{
font-family: myFont; //命名
src: url('Sansation_Light.ttf') ,url('Sansation_Light.eot'); /* IE9 */
}
div{font-family:myFont}
</style>
/**例子2**/
@font-face {
font-family: 'JDZH-Light';
src: url('xxx.com/data/ppms/others/JDZH_Light.ttf') format('truetype');
}font-weight 属性：设置字体是否加粗，属性值在 100 ~ 900 ，其中
normal的值为 400，bold的值为700。大部分数值在浏览器上都是支持的，但当所使用的字体不支持时，就无法看见字体的粗细的变化，以“微软雅黑”为例，它仅支持400 和 700 这两种粗细，当在属性值为500时也只有400的效果；Mac 上的“苹方”字体支持从100到900之间的各种粗细总结:
Mac & iOS ：“苹方”字体500 和600的加粗效果是不同的；
>=600的加粗效果是相同Windows：“微软雅黑”字体：只有
>=600才会加粗且加粗效果相同Android ： Droid Sans 字体，只有
>=700才会加粗且加粗效果相同
行高用百分比,表示字号的百分之几，由于行高大于字号,百分比都是大于100%
比如:
font:12px/200% '宋体'同font:12px/24px '宋体',200%可理解成word内的2倍行高，反之,
font:16px/48px '宋体';同font:16px/300% '宋体'
字体商用问题
如何优雅的选择字体(font-family) 、字体介绍及选择
衬线体如今已经很少使用了，我们所熟悉的“宋体”基本上只能在纸质出版物中见到。而非衬线体更符合现代审美。
温馨提示：做PPT不要用宋体。如果不知道用什么字体，那就用系统的默认字体：Win 平台用微软雅黑、Mac 平台用苹方字体。
设计师在做海报设计或者制图的时候，使用了宋体，说明她一定是个外行
扩展
多字体fallback机制：font-family:'SimSun','Microsoft YaHei'，‘monospace’
字号、行高、字体三合一：font:12px/30px "Times New Roman","Microsoft YaHei"
字体可分为:
衬线体serif、非衬线体sars-serif、等宽字体monospace、手写体【草书】cursive、虚幻字体fantasy
serif(衬线体)在字的笔画开始、结束的地方有额外的装饰，而且笔画的粗细会有所不同。
常见的衬线体有：
- 宋体、楷体
- Times New Roman
sans-serif(无衬线体):笔划粗细基本一致,只剩下主干，造型简明有力，起源也很晚。适用于标题、广告等，识别性高
常见的无衬线体有：
- 黑体
- Windows 平台默认的中文字体：微软雅黑（Microsoft Yahei）
- Windows 平台默认的英文字体：Arial
- Mac & iOS 平台默认的中文字体：苹方（PingFang SC）
- Mac & iOS 平台默认的英文字体：San Francisco
- Android 平台默认字体：Droid Sans
微软雅黑英语别名: "Microsoft YaHei";
宋体英语别名: "SimSun";
一般中文使用：微软雅黑、宋体、黑体
一般英文使用：Arial、Times New Roman
若需要其他的字体，则需单独安装字体，或者切图。
查字体侵权：360查字体 [https://fonts.safe.360.cn/]
注意事项：
大部分字体不是免费的，微软雅黑字体是使用在 office 软件中，一旦脱离了 office 软件或者脱离了 Windows 系统（比如说做好的PPT打印出来拿去做商业宣传）是不能使用该字体的；同理，苹果专属的「苹方字体」也只能在苹果系统的生态内使用
常见免费可商用字体：
思源黑体（Source Han Sans）：Adobe 和 Google 在 2014 年 7 月联合推出的针对中日韩的开源字体，在字重（字体粗细程度）上分7个层级
思源黑体是最有名的免费商用字体。字体下载：https://github.com/adobe-fonts/source-han-sans/tree/release/
思源宋体：同样也是Adobe 联合 Google经过长达一年半的研发， 在 2019年 4 月 3 日发布了思源宋体（ Source Han Serif，Google 称 Noto Serif CJK）。
思源宋体包含了简繁日韩四种汉字写法，拥有7种粗细字重，共设计了458745个汉字。也就是说每一种字重包括65535个字形。
方正系列：方正对外提供四款免费字体，楷体、黑体、仿宋、书宋，可以商业发布，只要不进行转换、改编、传播。
注：方正虽然有四款优秀的免费可商用的字体，但有一点麻烦的是，需要书面授权，感兴趣的同学可以在他们的官网上查看一下授权使用范围。
站酷系列字体：截止目前有4种字体，都是免费授权全社会使用，允许商用
文泉驿系列字体：说到中文字体开源的鼻祖，学者房骞骞在 2004 年发起的公益项目应该算一个。文泉驿系列字体是开源字体，允许商业使用。
郑庆科黄油体：这是一款个人设计师郑庆科推出的黄油体。
濑户字体：濑户制作的免费字体，字体包含中文繁体常用字及多国语言。
Arual：这是一款设计师都爱用的英文字体，简单实用。
Font Space：Font Space有很全的字体，都是用户自己上传的，截至2017年3月有21款免费可商用的字体（包含2款文泉驿中文）常见的免费字体：http://zenozeng.github.io/Free-Chinese-Fonts/
思源黑体是最有名的免费商用字体，点击红框部分下载该字体的压缩包 
特殊字体使用(webfont)
除了系统字体外，我们也可以使用制定特殊的字体，但需要将指定字体提前下载到站点中。首先可以选择字体生成工具帮我们生成各种格式的字体
下载字体的网站推荐
字体的常见格式:ttf、otf、woff、eot、svg
注意：不同浏览器所支持的字体格式是不一样的
#### TureTpe格式：(.ttf)
.ttf 字体是Windows和Mac的最常见的字体，是一种RAW格式。
支持这种字体的浏览器有IE9+、Firefox3.5+、Chrome4+、Safari3+、Opera10+、iOS Mobile、Safari4.2+。
#### OpenType格式：(.otf)
.otf 字体被认为是一种原始的字体格式，其内置在TureType的基础上。
支持这种字体的浏览器有Firefox3.5+、Chrome4.0+、Safari3.1+、Opera10.0+、iOS Mobile、Safari4.2+。
#### Web Open Font Format格式：(.woff)
woff字体是Web字体中最佳格式，他是一个开放的TrueType/OpenType的压缩版本，同时也支持元数据包的分离。
支持这种字体的浏览器有IE9+、Firefox3.5+、Chrome6+、Safari3.6+、Opera11.1+。
#### Embedded Open Type格式：(.eot)
.eot字体是IE专用字体，可以从TrueType创建此格式字体，支持这种字体的浏览器有IE4+。
#### SVG格式：(.svg)
.svg字体是基于SVG字体渲染的一种格式。
支持这种字体的浏览器有Chrome4+、Safari3.1+、Opera10.0+、iOS Mobile Safari3.2+。WebFont 的使用步骤
1.打开网站iconfont-webfont平台，选择下载得到一个压缩包，解压打开，如下：
2. 使用font-face声明字体
@font-face {
font-family: 'webfont';
src: url('webfont.eot'); /* IE9*/
src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('webfont.woff') format('woff'), /* chrome、firefox */
url('webfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
url('webfont.svg#webfont') format('svg'); /* iOS 4.1- */
}3.定义使用webfont的样式
.web-font{
font-family:"webfont" !important;
font-size:16px;font-style:normal;
-webkit-font-smoothing: antialiased;
-webkit-text-stroke-width: 0.2px;
-moz-osx-font-smoothing: grayscale;
}4.为文字加上对应的样式
<i class="web-font">有朋自远方来</i>完整案例
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
p{font-size:30px}
/* 如果要在网页中使用web字体（用户电脑上没有这种字体）*/
/* 第一步：声明字体*/
@font-face {
font-family: 'my-web-font';
src: url('font/webfont.eot'); /* IE9*/
src: url('font/webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('font/webfont.woff') format('woff'), /* chrome、firefox */
url('font/webfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
url('font/webfont.svg#webfont') format('svg'); /* iOS 4.1- */
}
/* 第二步：定义一个类名，谁加这类名，就会使用 webfont 字体*/
.webfont{font-family: 'my-web-font';}
</style>
</head>
<body>
<!-- 第三步：引用 webfont 字体 -->
<p class="webfont">有朋自远方来</p>
</body>
</html>字体图标(阿里巴巴矢量图)
将图片制作成字体,即把图标当作字体来看待，凡是字体拥有的属性(字体大小、颜色等)均适用于图标,常见的做法：把网页中一些小的图标，借助工具生成一个字体包，然后就可以像使用文字一样使用图标了。这样做的优点是：
a.所有图标打包成字体库，减少请求；
b.具有矢量性，可保证清晰度；
c.使用灵活，便于维护。
从iconfont-阿里巴巴矢量图标库找到想要的图标，加入购物车并下载解压，打开里面的demo.html
//图标字体引用--完整示例
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
@font-face {/*申明字体*/
font-family: 'iconfont';
src: url('font/iconfont.eot'); /* IE9*/
src: url('font/iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('font/iconfont.woff') format('woff'), /* chrome、firefox */
url('font/iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
url('font/iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */
}
.iconfont{font-family: iconfont}
p{
width: 200px;
border: 1px solid #000;
line-height: 60px;
font-size:30px;
margin:100px auto;
text-align: center;
}
p span{ color:red}
</style>
</head>
<body>
<!-- 编码代表图标 -->
<p><span class="iconfont"></span>扫码付款</p>
</body>
</html>
/**若是伪元素使用字体图标**/
.icon::before{
content:"\e628"; /**/
font-family: iconfont;
color:red;
}字体图标(Bootstrap)
网站：Font Awesome, 为 Bootstrap 而创造的图标字体
下载并解压,如果只是想要字体的话，可以把css和font这两个文件夹拷贝到项目里,并在html文档中的 <head> 标签里，引入 font-awesome.min.css 文件
<link rel="stylesheet" href="css/font-awesome.min.css">想在哪里使用图标就在这个标签里加className就行（className都在网站上列出来了）
<span class="icon-play">使用图标</span>其他字体相关网站
Font Awesome 使用介绍：Font Awesome，一套绝佳的图标字体库和CSS框架
定制自已的字体图标库：iconfont-阿里巴巴矢量图标库 、SVG Icon Libraries and Custom Icon Font Organizer ❍ IcoMoon
涉及到：jQuery fullPage 全屏滚动插件
2.文本属性
text-align:center; //left、right、center、justify（ie支持）
text-overflow:ellipsis; //clip、string(使用给定的字符串来代表被修剪的文本)
text-decoration:none; //none、underline下划线、line-through中划线、overline上划线
box-sizing:conten-box; //(外加、标准盒模型) 【border-box(内减 IE模型)】
white-space:nowrap; //normal、 pre-wrap（文字换行）、pre-line、inherit、break-spaces】
overflow-wrap:normal; //break-word
word-break:normal; //换行规则 break-all(单词内换行)、keep-all(在半角空格或连字符处换行)
word-wrap:normal; //断字点换行normal长单词换行到下行 break-word(在长单词或URL地址内部进行换行)
overflow:visible;// auto超出的部分让浏览器自行解决 hidden scroll
//【水平阴影的位置(元素水平移动距离)[必填可负值] 垂直阴影的位置[必填可负值] 模糊距离 阴影的颜色】
text-shadow:2px 2px #ff0000; //文本阴影
text-shadow: 20px 27px 22px pink; //[水平位移 垂直位移 模糊程度 阴影颜色]
box-shadow: 2px 2px #ff0000; //盒子阴影
box-shadow: h-shado v-showow blur spread color inset; //盒子阴影
对应备注：【水平阴影位置(可负) 垂直阴影位置(可负) 模糊距离(可选) 阴影大小(可选) 阴影颜色(可选) 阴影在内侧/外侧,外侧为默认(可选)】
text-indent:5px; 首行缩进几个字符
letter-spacing: 0.5cm ; 单个字母之间的间距
word-spacing: 1cm; 单词之间的间距
text-transform: lowercase; //单词字体大小写【uppercase(单词大写)、lowercase(单词小写) 、capitalize(每个单词的首字母大写)
direction:ltr;//（默认,文本方向从左到右) 文本方向【rtl (文本方向从右到左) inherit(规定应该从父元素继承 direction 属性的值)】
unicode-bidi: normal; 【 embed(创建一个附加的嵌入层面)、bidi-override(创建一个附加的嵌入层面,重新排序取决于direction 属性)、 initial、inherit】
overflow 属性的属性值可以是：
- `visible`：默认值。多余的内容不剪切也不添加滚动条，会全部显示出来。
- `hidden`：不显示超过对象尺寸的内容。
- `auto`：如果内容不超出，则不显示滚动条；如果内容超出，则显示滚动条。
- `scroll`：Windows 平台下，无论内容是否超出，总是显示滚动条。Mac 平台下，和 `auto` 属性相同。white-space:https://www.runoob.com/cssref/pr-text-white-space.html
文字凹凸效果
通过text-shadow设置多个阴影（每个阴影之间使用逗号隔开）完成该效果。实现凹凸文字效果的方式比较简单，给左上角放白色的阴影，右下角放黑色的阴影，就达到了凹下去的效果
background-color: #666;
font-size: 100px;
text-align: center;
font-weight: bold;
font-family: "Microsoft Yahei";
color: #666;
text-shadow: -1px -1px 1px #fff, 1px 1px 1px #000;/*凸*/
text-shadow: -1px -1px 1px #000, 1px 1px 1px #fff;/*凹*/
文字溢出展示省略号
-webkit-box 和 -webkit-box-orient 属性将容器元素设置为一个垂直方向的弹性盒子
注意:-webkit-line-clamp 是一个非标准属性，只在 WebKit 内核的浏览器（如 Chrome 和 Safari）中生效，因此这种方法可能不适用于所有浏览器。如果需要更广泛的浏览器兼容性，可能需要使用JavaScript来动态计算和截断文本
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3; /*显示3行*/
overflow: hidden; /*超出隐藏*/
text-overflow: ellipsis; /*溢出显示省略号*/
width: 200px !important; //限制文本宽度
word-wrap: break-word; //自动换行
word-break: break-all; //自动换行（兼容字母）也可使用 JavaScript 来控制展示效果，如果需要兼容其他浏览器该方法也是不错的选择
var textContainer = document.getElementById("textContainer");
var lineHeight = parseInt(window.getComputedStyle(textContainer).lineHeight);
var maxHeight = lineHeight * 3; //控制展示三行
if (textContainer.offsetHeight > maxHeight) {
while (textContainer.offsetHeight > maxHeight) {
textContainer.textContent = textContainer.textContent.replace(/\W*\s(\S)*$/, '...');
}
}
3.背景属性
background-color:#ff99ff; 设置元素的背景颜色。【十六进制、hsla、rgba、rgb、单词】
background-image:url(images/2.gif); 将图像设置为背景。
background-image:linear-gradient(to right, yellow, green);(方向, 起始颜色, 终止颜色)-线性渐变;
background-image: radial-gradient(100px at center,yellow ,green);(辐射的半径大小, 中心的位置, 起始颜色, 终止颜色)-径向渐变
background-image: linear-repeating-gradiant; 重复
background-size: 500px 500px;【100% auto;、50% 50%; cover 、contain】
background-position:center top; 设置背景图片在当前容器中的位置
background-position：-50px -120px ;向右偏移量 向下偏移量;【可用像素描述和用单词描述两种赋值方式】【例如：100px 200px、-50px -120px 】
background-position: left、center;描述左右的词 描述上下的词【：left、center、right top 、center、bottom 】
background-repeat: no-repeat; 设置背景图片是否重复及如何重复，默认平铺满。【repeat-x横向平铺；repeat-y纵向平铺】
background-clip:content-box; 背景裁切，`padding-box`,`border-box`超出border-box部分,将裁剪掉
background-origin:padding-box; 指定背景图形的位置区域 【border-box(框开始显示背景图)、content-box(内容区域开始显示背景图)】
background-attachment:scroll; 设置背景图片是否跟着滚动条一起移动。【fixed 】
clip-path: circle(50px at 100px 100px); 裁剪出元素的部分区域 圆 ;
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);三角形
clip-path: inset(5% 20% 15% 10%);矩形
clip-path: ellipse(25% 40% at 50% 50%);椭圆
clip-path: (svg);可导入svg矢量图，实现ios图标的圆角background:red url(1.jpg) no-repeat 100px 100px fixed; //综合属性
//等价于
background-color:red;
background-image:url(1.jpg);
background-repeat:no-repeat;
background-position:100px 100px;
background-attachment:fixed;
//cover：图片始终填充满容器，且保证长宽比不变。图片如果有超出部分，则超出部分会被隐藏
// contain：将图片完整地显示在容器中，且保证长宽比不变。可能会导致容器的部分区域为空白
background-size: 500px 500px;【100% auto;、50% 50%; cover 、contain】精灵(雪碧图)
所谓精灵图就是把很多的小图片合并到一张较大的图片，通过background-position改变背景图片的位置来显示我们想要的部分。在一定程度上可以减少页面的加载速度和缓解服务器的压力，从而提升了用户体验。但由于图片的背景都是详细测量而得出来的，如果需要改动页面，将会是很麻烦的一项工作。
display: inline-block;
background: url(images/abcd.jpg) no-repeat;
width: 108px;
height: 110px;
background-position: 0 -9px; 4.颜色表示法
颜色展示的常见方法：单词、rgb、十六进制、rgba[CSS3]、HSLA[CSS3]
所有用
#开头的值，都是16进制；RGBA、HSLA可应用于所有使用颜色的地方
单词：red、green、blue、orange、gray 等
十六进制：#ff0000;
RGB：rgb(255,0,0)【红】; rgb(0,0,0)【黑】rgb(255,255,0)【黄（黄色就是红色和绿色的叠加）】
RGBA:rgb(255,0,0,0.5)RGB
RGB 表示三原色“红”red、“绿”green、“蓝”blue
光学显示器中，每个像素都是由三原色的发光原件组成的，靠明亮度不同调成不同的颜色的。r、g、b的值，每个值的取值范围0~255，一共256个值。
RGBA
RGBA 即：Red 红、Green 绿、Blue 蓝、Alpha 透明度
R、G、B 的取值范围是：0~255；透明度的取值范围是 0~1。
自然界中所有的颜色都可以用红、绿、蓝(RGB)这三种颜色波长的不同强度组合而得，这就是人们常说的三原色原理。
RGB三原色也叫加色模式，这是因为当我们把不同光的波长加到一起的时候，可以得到不同的混合色。例：红+绿=黄色，红+蓝＝紫色，绿+蓝=青。
在数字视频中，对RGB三基色各进行8位编码就构成了大约1678万种颜色，这就是我们常说的真彩色。所有显示设备都采用的是RGB色彩模式。
RGB各有256级(0-255)亮度，256级的RGB色彩总共能组合出约1678万种色彩，即256×256×256=16777216。
十六进制
首先我们要了解16进制与10进制之间的转换。下面举几个例子。
问：16进制中28等于10进制多少？ 答：2*16+8 = 40。
问：16进制中的af等于10进制多少？ 答：10 * 16 + 15 = 175
同理，#ff0000等价于rgb(255,0,0)，
#123456等价于rgb(18,52,86)十六进制可以简化为3位，所有#aabbcc的形式，能够简化为#abc
如：#112233可简化成#123;
#000 (黑) ,#fff (白) , #f00(红) , #222(深灰), #333(灰), #ccc(浅灰)
HSLA
background-color: hsla(240,50%,50%,0.4);
H色调，取值范围 0~360。0或360表示红色、120表示绿色、240表示蓝色。
S饱和度，取值范围 0%~100%。值越大，越鲜艳。
L亮度，取值范围 0%~100%。亮度最大时为白色，最小时为黑色。
A透明度，取值范围 0~1。
设置透明度方法
opacity: 0.3:将整个盒子及子盒子设置透明度。也就是说，当盒子设置半透明的时候，会影响里面的子盒子。
background: transparent:可以单独设置透明度，但设置的是完全透明（不可调节透明度）。
5.列表属性
list-style：none (样式重置)
list-style-image:url(images/2.gif) ; /*列表项前设置为图片*/
list-style-position：outside ;默认值 表示标志在列表项之外 inside 表示标志在列表项之内
list-style-type：disc;控制列表项标记的符号类型的,常见的有：disc、circle、square、decimal、upper-roman、upper-latin
6.边框的属性
firefox.0+、safari5.0+、google chrome10.0+、opera10.5+、ie9+ 支持border-radius 标准语法格式，但对于老版本的浏览器需要根据不同的浏览器添加前缀，Mozilla内核需要加上“-moz”,webkit内核的需要加上“-webki"等，IE和opera没有私有的格式，为了浏览器的兼容性，一般代码如下：
-webkit-border-radius:10px
-moz-border-radius:10px
border-radius:10pxborder:1px solid red;/**border-width、border-style、border-color **/
/** 按方向拆开 border-top、border-right、border-bottom、border-left**/
border-width: 90px;
border-top-width: 90px;
border-style: solid; /**solid、dashed、dotted、ridge **/
border-color: red green yellow blue;
border-right-color: transparent;
border-radius: 90px 0 90px 0;
border-radius: 90px/45px;
border-image:url('/png');//使用图像创建边框
border-style:solid dashed;
border:none;
border-left: none;
border-left-width: 0;
border-image: url(.img.png) 30 round;
1.利用 border 属性画一个三角形
div{
width: 0;
height: 0;
border: 50px solid transparent;
border-top-color: red;
border-bottom: none;
}
2.利用 border 属性画一个三角形
div{
width: 0;
height: 0;
border-top: 30px solid red;
/* 通过改变 border-left 和 border-right 中的像素值，来改变三角形的形状 */
border-left: 20px solid transparent;
border-right: 20px solid transparent;
}
边框圆角(border-radius)
//border-radius值的指定
/**边框的每个圆角，本质上是一个圆，圆有水平半径和垂直半径**/
/**如果二者相等，就是圆；如果二者不等， 就是椭圆**/
border-radius:15px; //圆角 [四个角]
border-radius:15px 20px; //圆角[左上+右下 右上+左下]
border-radius:10px 12px 15px; //圆角 [三个角]
border-radius:10% 20%; //圆角[占边宽度的百分比 占边高度的百分比]
//椭圆角[斜杠之前为四个角设置水平半径，斜杠之后为四角设置垂直半径]
border-radius:0 15px 15px 15px/10px 20px 30px 2px;
border-radius:0px 20px/10px 12px 12px;
border-radius:10px/20px;
/**单个属性的写法**/
border-top-left-radius: 60px 120px; //参数解释：水平半径 垂直半径
border-top-right-radius: 60px 120px;
border-bottom-left-radius: 60px 120px;
border-bottom-right-radius: 60px 120px;
/**复合写法**/
border-radius: 60px/120px; //参数：水平半径/垂直半径
border-radius: 20px 60px 100px 140px; //从左上开始，顺时针赋值。如果当前角没有值，取对角的值
border-radius: 20px 60px;
边框图片(border-image)
//border-image简介
border-images：none 100% 1 0 stretch;//这些值为默认值
border-images属性用于设置如下几个值：
border-image-source：绘制边框的图像位置
border-image-slice：指定图形边界向内偏移、图片裁剪位置,可为数值/百分比 无单位专指像素
border-image-width：图像边界的宽度
border-image-outset：边框外部绘制border-images-area的量
border-image-repeat：设置图像边界是否重复(repeat)、拉伸(stretch)、铺满(round)
border-image-source: url("images/border.png");/* 边框图片的路径*/
border-image-slice: 27;/* 图片边框的裁剪*/
border-image-width: 27px;/*图片边框的宽度*/
border-image-repeat: stretch; /*边框图片的平铺*/
--repeat :正常平铺 但是可能会显示不完整
--round: 平铺 但是保证 图片完整
--stretch: 拉伸显示
/* 综合属性*/
border-image: url("images/border.png") 27/20px round;
边框阴影(box-shadow)
边框阴影：`box-shadow` 属性
box-shadow: 水平偏移 垂直偏移 模糊程度 阴影大小 阴影颜色
box-shadow: 15px 21px 48px -2px #666;
参数解释：
- 水平偏移：正值向右 负值向左。
- 垂直偏移：正值向下 负值向上。
- 模糊程度：不能为负值。
后面还可以再加一个inset属性，表示内阴影。如果不写，则默认表示外阴影。
box-shadow:3px 3px 3px 3px #666 inset;
设置边框阴影不会改变盒子的大小，即不会影响其兄弟元素的布局。
我们还可以设置多重边框阴影，实现更好的效果，增强立体感。7.鼠标的属性
cursor: pointer; //常用：auto pointer
auto：默认值。浏览器根据当前情况自动确定鼠标光标类型。
pointer：手形光标
hand: 手形光标
all-scroll:IE6.0 有上下左右四个箭头,中间有一个圆点的光标,用于标示页面可以向上下左右任何方向滚动
col-resize:IE6.0 有左右两个箭头,中间由竖线分隔开的光标,用于标示项目或标题栏可以被水平改变尺寸
crosshair:简单的十字线光标。
default:客户端平台的默认光标。通常是一个箭头。
move:十字箭头光标。用于标示对象可被移动。
help:带有问号标记的箭头。用于标示有帮助信息存在。
no-drop:IE6.0 带有一个被斜线贯穿的圆圈的手形光标。用于标示被拖起的对象不允许在光标的当前位置被放下
not-allowed :IE6.0 禁止标记(一个被斜线贯穿的圆圈)光标。用于标示请求的操作不允许被执行。
progress:IE6.0 带有沙漏标记的箭头光标。用于标示一个进程正在后台运行。
row-resize:IE6.0 有上下两个箭头,中间由横线分隔开的光标。用于标示项目或标题栏可以被垂直改变尺寸
text:用于标示可编辑的水平文本的光标。通常是大写字母 I 的形状。
vertical-text:IE6.0 用于标示可编辑的垂直文本的光标。通常是大写字母 I 旋转90度的形状。
wait: 用于标示程序忙用户需要等待的光标。通常是沙漏或手表的形状。
*-resize : 用于标示对象可被改变尺寸方向的箭头光标。
w-resize | s-resize | n-resize | e-resize | ne-resize | sw-resize | se-resize | nw-resize
url ( url ):IE6.0 用户自定义光标,使用绝对或相对 url 地址指定光标文件(后缀为 .cur 或者 .ani )。8.滚动条属性
overflow-y: auto; /* 或者 scroll*/
::-webkit-scrollbar { /* 为滚动条设置样式 */
width: 5px;
height: 5px;
background: transparent;
border-radius: 5px;
}
::-webkit-scrollbar-button {} /* 滚动条两端按钮 */
::-webkit-scrollbar-track {}/* 动条轨道--外层轨道 */
::-webkit-scrollbar-track-piece {} /* 内层轨道，它会覆盖外层轨道的样式 */
::-webkit-scrollbar-thumb {} /* 滑块 */
::-webkit-scrollbar-thumb:hover {} /* 当鼠标悬停在滚动条上时的设置 */
::-webkit-scrollbar-thumb:vertical:hover {} /* 纵向滑块悬浮 */
::-webkit-scrollbar-thumb:horizontal:hover { }/* 横向滑块悬浮 */
-webkit-overflow-scrolling: touch; /*可解决H5滚动卡顿问题*/
scrollbar-face-color: blue;
滚动条新语法
scrollbar-width: thin; //auto或者thin 定义滚动条宽度，但无法像webkit的语法那样定义一个具体的数
scrollbar-color: #6969dd #e0e0e0; //为滚动条 track和thumb定义成对值的颜色
//滚动条隐藏
.XX::-webkit-scrollbar { display: none}
//IE 或 Edge 可用以下代码
.XX {-ms-overflow-style: none;}
//至于 Firefox，目前没有任何办法隐藏滚动条。9.其他属性
vertical-align属性
场景：常用于图文混排文字垂直居中；可用于指定行内元素（inline）、行内块元素（inline-block）、表格的单元格（table-cell）的垂直对齐方式。主要是用于图片、表格、文本的对齐。
vertical-align: middle; /*指定行级元素的垂直对齐方式。*/box-sizing 属性
box-sizing的属性值可以是:content-box(外加模式,css的默认方式 )、border-box(内减模式 )
content-box：盒子的实际宽度 = 设置的 width + padding + border
border-box：盒子的实际宽度 = 设置的 width
border-box改变 padding 和 border 的大小，会改变内容的宽高，盒子的总宽高不变
在 标准盒子模型中，width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。
IE盒子模型中，width 和 height 指的是内容区域+border+padding的宽度和高度。
10.图标库的使用
阿里巴巴矢量图标库共有三种使用方式：Unicode、Font class、Symbol
Unicode的方式,使用此类图标相当于字体，常添加新class，通过 font-size控制图标大小，可以设置color等
以编码:& #xe600;为例
将iconfont.css，iconfont.ttf，iconfont.woff，iconfont.woff2拷贝到 /src/assets/icon-font 文件夹下
import './assets/icon-font/iconfont.css'
<span class="icon iconfont"></span>
Font class的方式使用, 此类图标相当于字体，常使用最后一个class，通过 font-size控制图标大小，可以设置color等
使用时在 font-class名称前加上 icon- 前缀
以icon-kaishi为例
将iconfont.css，iconfont.ttf，iconfont.woff，iconfont.woff2拷贝到 /src/assets/icon-font 文件夹下
import './assets/icon-font/iconfont.css'
<i class="iconfont icon-kaishi"></i>
Symbol 的方式渲染,此类图标相当于图片，添加一个class，通过 width和height控制图标大小，可以通过fill设置图标颜色等
以 #icon-kaishi为例
将本地demo包中的iconfont.js拷贝到 /src/assets/icon-font 文件夹下
import './assets/icon-font/iconfont.js'
<svg class="icon svg-icon svgkaishi" aria-hidden="true">
<use xlink:href="#icon-kaishi "></use>
</svg>
<style lang="less">
.svgkaishi {
width: 32px;
height: 32px;
fill: pink;
}
</style>
11.兼容性问题
处理兼容性问题的常见方法：为属性添加私有前缀
若此方法不能解决，应尽量避免使用，无需刻意去处理CSS3的兼容性问题
可通过网址http://caniuse.com/来查询CSS3各特性的支持程度。
-webkit-: 谷歌 苹果
-moz-:火狐
-ms-：IE
-o-：欧朋
示例：为浏览器添加不同的私有前缀
/**background: linear-gradient(left, green, yellow)**/
background: -webkit-linear-gradient(left, green, yellow);
background: -moz-linear-gradient(left, green, yellow);
background: -ms-linear-gradient(left, green, yellow);
background: -o-linear-gradient(left, green, yellow);
background: linear-gradient(left, green, yellow);12.滤镜
滤镜1：让图片变成灰度图的效果（IE有效果，google浏览器无效果）
<img src="3.jpg" style="filter:gray()">
<img src="3.jpg">
<img src="3.jpg" style="filter:gray()"> /*滤镜：设置图片为灰白效果*/
扫一扫
4524
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
