CSS 属性解疑答惑(基本为CSS3)

1. border-radius

border-radius请参考文章关于css3的边框的border-radius和border-image用法的详解

要点总结:
border-radius: 接受8个属性（这是全写格式），前四个为x轴，后四个为y轴，以斜杠划分x轴、y轴，即border-radius:左上角右上角右下角左下角 / 左上角右上角右下角左下角 ;（x轴/y轴），如：border-radius: 100px 0 100px 0/100px 0 100px 0。

原理:

首先以div的四个点做交叉线，把交点作为圆心，记为O。
以border-radius: 100px 0 100px 0/100px 0 100px 0 为例，然后再以左上角为例，取x轴100px处为A点，取y轴100px处为B点，然后以圆心O画圆（正圆或椭圆），经过A和B两点，则A和B两点的弧即为border-radius的效果，其他三个角同理。

2. border-image

border-image请参考文章border-image属性分析

要点总结:
border-image-slice：top right bottom left。分别指切割背景图片的四条线距离上右下左的距离。按此规则将图分为了9块，然后将此9块图片切片对应到div的相应位置，再进行相应的拉伸或平铺。请看动图演示：

border-image.gif

新版Chrome浏览器border-image属性不生效
在stack overflow找到答案，说是在用border-image属性之前加上该属性即可：border：27px solid transparent；后看到国内某博主说只要设置成border: 27px soild就行。后经尝试，确实如此。
复合属性需要添加浏览器前缀，单个属性不需添加前缀
当使用复合属性时，需要添加前缀，像这样：

border-image: url("img/border.png") fill 10;    /*IE11*/
-webkit-border-image: url("img/border.png") 10;    /*Chrome和Safari*/
-moz-border-image: url("img/border.png") fill 10;    /*Firefox*/
-o-border-image: url("img/border.png") 10;    /*Opera*/

3. background的相关特性

background-position

当背景图片尺寸（background-size）不做任何的重置（也就是100% 100%）时，水平百分比的值等于容器宽度百分比值减去背景图片宽度百分比值。垂直百分比的值等于容器高度百分比值减去背景图片高度百分比值。

如果取值background-position: 75% 50%;，背景图片的起始位置：

水平位置（x轴）：(410 - 100) * 75% = 232.5px
垂直位置（y轴）：(210 - 100) * 50% = 55px

原文: https://www.w3cplus.com/css/background-position-with-percent.html © w3cplus.com

background相关属性可一次设置多个值，例如：

#example1 { 
    background-image: url(img_flwr.gif), url(paper.gif); 
    background-position: right bottom, left top; 
    background-repeat: no-repeat, repeat; 
}

或者

#example1 {
    background: url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat;
}

background-clip 与 background-origin的区别

请参考HTML/CSS: background-clip 与 background-origin的区别
要点总结:

background-origin指的是从哪里开始定位背景图。
background-clip指的是从哪里开始裁剪背景图或背景颜色。举例：假如background-origin设置为border-box，background-clip设置为content-box，那么背景图会从border那开始定位，从content那开始裁剪，出现的结果就是，背景图有一部分被裁剪没了。

background-attachment（CSS1属性）

background-attachment设置背景图像是否固定或者随着页面的其余部分滚动。取值有scroll、fixed、inherit

background-attachment

参考文章 background-attachment属性进阶

要点总结:
scroll:默认值，背景图相对于元素固定，背景随页面滚动而移动，即背景和内容绑定。
fixed：背景图相对于视口固定，所以随页面滚动背景不动，相当于背景被设置在了body上。
local：背景图相对于元素内容固定，
inhert:继承，没什么说的。
该属性可以应用于任何元素。

重点:
对于scroll，一般情况背景随内容滚动，但是有一种情况例外。对于可以滚动的元素（设置为overflow:scroll的元素）。当background-attachment设置为scroll时，背景图不会随元素内容的滚动而滚动。

对于可以滚动的元素（设置为overflow:scroll的元素）,设置background-attachment:local，则背景会随内容的滚动而滚动。因为背景图是相对于元素自身内容定位，开始固定，元素出现滚动条后背景图随内容而滚动。

给任何元素的背景图设置background-attachment: fixed;效果都是一样的，都是相对于视口，因为一个网页只有一个视口，该背景和元素已经没关系了，要说有关大概也只是元素不可见则背景图不可见。

4. CSS3 渐变（Gradients）

参考文章为：深入理解CSS线性渐变linear-gradient
例题小测试：CSS3重复渐变（线性和径向渐变）

线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向

要点总结:

语法background: linear-gradient(direction, color-stop1, color-stop2, ...);
默认渐进方向是从上到下。

#grad {
  background: -webkit-linear-gradient(red, blue); /* Safari 5.1 - 6.0 */
  background: -o-linear-gradient(red, blue); /* Opera 11.1 - 12.0 */
  background: -moz-linear-gradient(red, blue); /* Firefox 3.6 - 15 */
  background: linear-gradient(red, blue); /* 标准的语法 */
}

从左到右（注意标准语法的 to 关键字）

#grad {
  background: -webkit-linear-gradient(left, red , blue); /* Safari 5.1 - 6.0 */
  background: -o-linear-gradient(right, red, blue); /* Opera 11.1 - 12.0 */
  background: -moz-linear-gradient(right, red, blue); /* Firefox 3.6 - 15 */
  background: linear-gradient(to right, red , blue); /* 标准的语法 */
}

对角

#grad {
  background: -webkit-linear-gradient(left top, red , blue); /* Safari 5.1 - 6.0 */
  background: -o-linear-gradient(bottom right, red, blue); /* Opera 11.1 - 12.0 */
  background: -moz-linear-gradient(bottom right, red, blue); /* Firefox 3.6 - 15 */
  background: linear-gradient(to bottom right, red , blue); /* 标准的语法 */
}

使用角度，语法 background: linear-gradient(angle, color-stop1, color-stop2);
重中之重：现代浏览器如何规定角度，请看下图

gradient-angle.jpg

但是，请注意很多浏览器(Chrome,Safari,fiefox等)的使用了旧的标准，即 0deg 将创建一个从左到右的渐变，90deg 将创建一个从下到上的渐变。换算公式 90 - x = y 其中 x 为标准角度，y为非标准角度。相当于
-webkit-linear-gradient(90deg,red,blue) = linear-gradient(0deg,red,blue)

带角度的话，如何计算起始点：

liner-gradient-angle.png

使用透明度（transparent）
为了添加透明度，我们使用 rgba() 函数来定义颜色结点。rgba() 函数中的最后一个参数可以是从 0 到 1 的值，它定义了颜色的透明度：0 表示完全透明，1 表示完全不透明。下面的实例演示了从左边开始的线性渐变。起点是完全透明，慢慢过渡到完全不透明的红色：

#grad {
  background: -webkit-linear-gradient(left,rgba(255,0,0,0),rgba(255,0,0,1)); /* Safari 5.1 - 6 */
  background: -o-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1)); /* Opera 11.1 - 12*/
  background: -moz-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1)); /* Firefox 3.6 - 15*/
  background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1)); /* 标准的语法 */
}

色标（非常重要）

先对此条来个总结：相邻两个颜色节点之间，如果颜色不一致，则平滑过渡；
如果颜色一致，则这两个节点之间为纯色，下例为其中的一个特殊个例；

background-image: linear-gradient(red 30%,blue 60%);
//等价于: 
background-image: linear-gradient(red 0%,red 30%,blue 60%,blue 100%);

如果两个颜色节点占据了同一个位置，则突然过渡。

浏览器对于色标并没有默认值，且必须设置至少两个色标。色标由颜色和位置组成。颜色使用任何一种颜色模式都可以，而位置可以使用百分比或数值。

【1】位置可以省略，浏览器默认会把第一个颜色的位置设置为0%，把最后一个颜色的位置设置为100%

【2】若渐变只有两种颜色，且第一个颜色的位置设置为n%，第二个颜色的位置设置为m%。则浏览器会将0%-n%的范围设置为第一个颜色的纯色，n%-m%的范围设置为第一个颜色到第二个颜色的过渡，m%-100%的范围设置为第二个颜色的纯色

background-image: linear-gradient(red 30%,blue 60%);
//等价于上一个
background-image: linear-gradient(red 0%,red 30%,blue 60%,blue 100%);

【3】若多色占据同一个位置，例a、b、c三色均占据n%这一位置，则0%-n%为前一种颜色与a颜色的颜色渐变；然后是n%-n%的a颜色与c颜色的颜色突变；n%-100%是c颜色与后一种颜色的颜色渐变。因此，中间的b是无用的

background-image: linear-gradient(red,yellow 50%,white 50%,black 50%,blue);
//等价于上一个
background-image: linear-gradient(red,yellow 50%,black 50%,blue);

【4】在CSS样式中，渐变相当于背景图片，在理论上可在任何使用url()值的地方采用。比如最常见的background-image、list-style-image以及border-image。但目前为止，仅在背景图片中得到完美的支持

重复的线性渐变（只有当首尾两颜色位置不同时在0%和100%时，重复渐变才生效）

#grad {
  /* Safari 5.1 - 6.0 */
  background: -webkit-repeating-linear-gradient(red, yellow 10%, green 20%);
  /* Opera 11.1 - 12.0 */
  background: -o-repeating-linear-gradient(red, yellow 10%, green 20%);
  /* Firefox 3.6 - 15 */
  background: -moz-repeating-linear-gradient(red, yellow 10%, green 20%);
  /* 标准的语法 */
  background: repeating-linear-gradient(red, yellow 10%, green 20%);
}

案例说明：

background-image:repeating-linear-gradient(red 20%, blue 50%)

不等同于

background-image:repeating-linear-gradient(red 0%, red 20%, blue 50%, blue 100%)

试想，如果等同的话，两头一个是红色的纯色，一个是蓝色的纯色，还怎么实现重复的功能。所以实现原理是，从20%的地方开始线性过渡，一直到50%的地方，这一个区间便是重复线性渐变的一个单元（我们记这个初始单元为item0吧），然后用此单元顺着线性渐变的方向不断重复。像上面这个例子background-image:repeating-linear-gradient(red 20%, blue 50%)，两头还有剩余空间，上头空间空着，下头空间不够，怎么办？下头还是继续放一个单元，放不下的就截掉。上头也放n（n可能大于等于1）个单元，但是要以n个整单元的最下边紧贴item0的最上面。请看此案例的效果图（要特别注意两头）：

repeat-liner-gradient.png

完整代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>repeat liner gradient</title>
    <style>
        #grad1 {
            height: 200px;
            width: 200px;
            background-image: repeating-linear-gradient(red 20%, blue 50%)
        }
    </style>
</head>
<body>
    <h3>重复线性渐变</h3>
    <div id="grad1"></div>
</body>
</html>

径向渐变（Radial Gradients）- 由它们的中心定义

语法： background: radial-gradient(center, shape size, start-color, ..., last-color);

你也可以指定渐变的中心、形状（圆形或椭圆形）、大小。默认情况下，渐变的中心是 center（表示在中心点），渐变的形状是 ellipse（表示椭圆形；当div的width和height值不相同时，渐进效果默认是椭圆；当div的width和height值相同时，渐进效果默认是正圆；其实也不难理解，正圆本身就是椭圆的一种特例。），渐变的大小（size参数）是 farthest-corner（表示到最远的角落，其他的取值还有closest-side、farthest-side、closest-corner；表示从渐变中心到size值所代表的点的距离为渐变半径）。

径向渐变的其他特性请参考线性渐变

5. CSS3 文本效果

要点总结：（优先级顺序：white-space > word-break > word-wrap）

box-shadow和text-shadow除了一个应用于盒子模型，一个应用于文字，其他一样。
white-space：规定整段文字遇到换行符等是否换行。如果不允许换行，那么接下来的word-break和word-wrap都不起作用了。
word-break：当某个单词到容器边界还没显示完全时，如何处理这个单词。定义了规则。取值keep-all表示保全每个单词，当下一个单词在这一行显示不完全时，把它放入下一行显示，如果让这个单词占整一行还放不下时，就需要设置word-wrap:break-word;让这个单词换行；取值break-all表示文字把每一行都占满，不管每行的最后那个单词是否显示正确，到了容器边界就将其截开换到下一行继续。在此取值情况下，word-wrap无论设置何值都无变化。
word-wrap：当整一行都放不下某个单词时，如何处理该单词。

6. CSS3 字体

废话少说，直接看代码

        @font-face {
            font-family: myFirstFont; //自定义的字体名称
            src: url(sansation_light.woff); //字体文件路径
        }

        @font-face {
            font-family: myFirstFont; //同样的字体名称
            src: url(sansation_bold.woff); //不同的字体文件
            font-weight:bold; //同一类字体下不同的字体风格
        }

        div {
            font-family: myFirstFont;
            /**
             font-weight: bold; //默认用到sansation_light.woff这个字体文件；如果此行代码解注释，就会用到sansation_bold.woff这个字体文件
            */
        }

7. CSS3 2D、3D 转换（transform）

矩阵乘法

矩阵.png

特效属性「Transform」+ 矩阵 matrix（重点看）

transform: skew(20deg,10deg);原理解析

div
{
transform: skew(20deg,10deg);
-ms-transform: skew(20deg,10deg); /* IE 9 */
-webkit-transform: skew(20deg,10deg); /* Safari and Chrome */
}

示意图：

skew.jpeg

文字说明：

区域OABC为原div
D点为该区域中心
因为x轴倾斜20deg，做辅助线m线；因为y轴倾斜20deg，做辅助线n线
I、J、K、L四点分别为区域OABC中心线与四边的交点
分别过K点和I点做平行线，平行于m线；分别过L点和J点做平行线，平行于n线；
以上所做四条线分别交于E、F、G、H点
连接E、F、G、H点所得区域即为transform: skew(20deg,10deg);的效果图
原理：D点也为区域EFGH的中心点，区域EFGH的线LJ等于原div的高，区域EFGH的线KI等于原div的宽

3D转换

3D旋转轴.png

其中，网布就是我们的屏幕，x轴沿屏幕平行的水平方向，y轴沿屏幕平行的垂直方向，z轴沿与屏幕垂直方向。

非常精彩的文章，必须看：好吧，CSS3 3D transform变换，不过如此！

Note：关于这篇文章我有一条知识点补充，元素的旋转应该是整个坐标轴都跟着旋转的，要不然没法解释图片的旋转木马效果demo中为什么每个图片都translateZ同样的数值。

8. CSS3 过渡（transition）

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>菜鸟教程(runoob.com)</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background: red;
            -webkit-transition: width 2s, height 2s, -webkit-transform 2s; /* For Safari 3.1 to 6.0 */
            transition: width 2s, height 2s, transform 2s;/* 属性名 过渡时间；属性值从一个变为另一个，在一段时间内平滑过渡； transform也是一个属性名，它的值用来做2D/3D转换*/
        }
        div:hover {
            width: 200px;
            height: 200px;
            -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
            transform: rotate(180deg);
        }
    </style>
</head>
<body>
<p><b>注意：</b>该实例无法在 Internet Explorer 9 及更早 IE 版本上工作。</p>
<div>鼠标移动到 div 元素上，查看过渡效果。</div>
</body>
</html>

小例子：

a {
    display: inline-block;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 5px;
    transition: 0.3s;
}
a:hover {
    box-shadow: 0 0 2px 1px rgba
    (0, 140, 186, 0.5);
}

解释：transition: 0.3s; 代表啥意思？a与a:hover属性值不同的都会变化。

9. CSS3 动画

思路：在选择的元素中使用animation属性，该属性值为动画名称时间；动画名称由@keyframes定义

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>菜鸟教程(runoob.com)</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background: red;
            animation: myfirst 5s;
            -webkit-animation: myfirst 5s; /* Safari and Chrome */
        }
        @keyframes myfirst {
            from {background: red;} /* 这里面可以写transform */
            /* 或者是 0% {background: red;} */
            to {background: yellow;}
            /* 或者是 100% {background: yellow;} */
        }
        @-webkit-keyframes myfirst /* Safari and Chrome */
        {
            from {background: red;}
            /* 或者是 0% {background: red;} */
            to {background: yellow;}
            /* 或者是 100% {background: yellow;} */
        }
    </style>
</head>
<body>
<p><b>注意:</b> 该实例在 Internet Explorer 9 及更早 IE 版本是无效的。</p>
<div></div>
</body>
</html>

transition过渡与 animation动画的区别是：前者需要触发，后者可以自动。

10. CSS3 多列（可以将文本内容设计成像报纸一样的多列布局）

column-rule.png

column-count： 分成几列
column-gap：列之间的间隙
column-width：列宽
column-span：跨几列

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style> 
.newspaper
{
    column-count:3;
    -moz-column-count:3; /* Firefox */
    -webkit-column-count:3; /* Safari and Chrome */
}
h2
{
    column-span:all;
    -webkit-column-span:all; /* Safari and Chrome */
}
</style>
</head>
<body>
<p><b>注意:</b> Internet Explorer 9及更早 IE 版本浏览器不支持 column-count 属性。</p>
<div class="newspaper">
<h2>英国维斯米斯特教堂碑文</h2>
当我年轻的时候，我梦想改变这个世界；当我成熟以后，我发现我不能够改变这个世界，我将目光缩短了些，决定只改变我的国家；当我进入暮年以后，我发现我不能够改变我们的国家，我的最后愿望仅仅是改变一下我的家庭，但是，这也不可能。当我现在躺在床上，行将就木时，我突然意识到：如果一开始我仅仅去改变我自己，然后，我可能改变我的家庭；在家人的帮助和鼓励下，我可能为国家做一些事情；然后，谁知道呢?我甚至可能改变这个世界。
</div>
</body>
</html>

效果图：

column-span-1.png

如果不设置column-span属性的效果图如下：

column-span-2.png

11. CSS3 用户界面

CSS3 调整尺寸(Resizing)

div
{
    resize:both; /* 可以横向、可以竖向、也可以同时两个方向*/
    overflow:auto;
}

效果图：（注意看右下角）

resize.png

CSS3 外形修饰（outline-offset ）

div
{
    border:2px solid black;
    outline:2px solid red;
    outline-offset:15px;
}

重点：outline不占据空间，对周围元素无影响，证明图如下

outline.png

12. CSS滤镜

简单语法：

img {
    -webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */
    filter: grayscale(100%);
}

关键字为filter，其属性值非常复杂，详细解释请看文章：你所不知道的 CSS 滤镜技巧与细节

13. CSS3 弹性盒子(Flex Box)

请认真阅读文章：

我自己的要点总结：（待续）

14. CSS3 多媒体查询

多媒体查询，查询什么：

viewport(视窗) 的宽度与高度
设备的宽度与高度
朝向 (智能手机横屏，竖屏) 。
分辨率

语法：

//多媒体查询由多种媒体组成，可以包含一个或多个表达式，表达式根据条件是否成立返回 true 或 false。
@media not|only mediatype and (expressions) {
    CSS 代码...;
}

not: 排除某种设备
only: 指定只有这种设备
all: 所有设备

也可以在不同的媒体上使用不同的样式文件：
<link rel="stylesheet" media="mediatype and|not|only (expressions)" href="print.css">

CSS3 多媒体类型：

all 用于所有多媒体类型设备
print 用于打印机
screen 用于电脑屏幕，平板，智能手机等。
speech 用于屏幕阅读器

以下实例在屏幕可视窗口尺寸大于 480 像素时将菜单浮动到页面左侧：

@media screen and (min-width: 480px) {
    #leftsidebar {width: 200px; float: left;}
    #main {margin-left:216px;}
}

当浏览器的宽度在 520 到 699px, 邮箱链接前添加邮件图标：

@media screen and (max-width: 699px) and (min-width: 520px) {
    ul li a {
        padding-left: 30px;
        background: url(email-icon.png) left center no-repeat;
    }
}

其他小零碎总结

假设父元素中只有三个子元素，这三个子元素左浮动，那么父元素会坍陷为0×0，解决办法：要么父元素也浮动；要么父元素加一个伪类来清除浮动
css 的 + 选择器表示相邻元素，使用场景比如：每两个相邻元素之间做某些处理。

最后编辑于：2018.06.18 23:18:06

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 203,179评论 5赞 476
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 85,229评论 2赞 380
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 150,032评论 0赞 336
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 54,533评论 1赞 273
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 63,531评论 5赞 365
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 48,539评论 1赞 281
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 37,916评论 3赞 395
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 36,574评论 0赞 256
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 40,813评论 1赞 296
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 35,568评论 2赞 320
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 37,654评论 1赞 329
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 33,354评论 4赞 318
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 38,937评论 3赞 307
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 29,918评论 0赞 19
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 31,152评论 1赞 259
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 42,852评论 2赞 349
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 42,378评论 2赞 342

CSS 属性解疑答惑(基本为CSS3)

1. border-radius

2. border-image

3. background的相关特性

background-position

background相关属性可一次设置多个值，例如：

background-clip 与 background-origin的区别

background-attachment（CSS1属性）

background-attachment