关于CSS3

接上 关于CSS
http://www.jianshu.com/p/01d228219d59

学习CSS3的最佳网站没有之一 http://www.w3school.com.cn/css3/index.asp

CSS3 被划分为模块。其中最重要的 CSS3 模块包括：

选择器，框模型，背景和边框，文本效果，2D/3D 转换，动画，多列布局，用户界面

边框：

兼容性：
Internet Explorer 9+ 支持 border-radius 和 box-shadow 属性。
Firefox、Chrome 以及 Safari 支持所有新的边框属性。
注释：对于 border-image，Safari 5 以及更老的版本需要前缀 -webkit-。
Opera 支持 border-radius 和 box-shadow 属性，但是对于 border-image 需要前缀 -o-。

创建圆角边框（border-radius，是设置所有四个 border-*-radius 属性的简写属性。）

border-radius:25px;
-moz-border-radius:25px; /* Old Firefox */

向矩形添加阴影（box-shadow），
box-shadow: 10px 10px 5px #888888;

使用图片来绘制边框（border-image，是设置所有 border-image-* 属性的简写属性。）

border-image:url(border.png) 30 30 round;
-moz-border-image:url(border.png) 30 30 round; /* 老的 Firefox */
-webkit-border-image:url(border.png) 30 30 round; /* Safari 和 Chrome */
-o-border-image:url(border.png) 30 30 round; /* Opera */

背景：

兼容性：
Internet Explorer 9+、Firefox、Chrome、Safari 以及 Opera 支持新的背景属性。

规定背景图片的尺寸（background-size）

div {
  /*background:url(bg_flower.gif) no-repeat;*/
  -moz-background-size:63px 100px; /* 老版本的 Firefox */
  background-size:63px 100px;
}

规定背景图片的定位区域（background-origin）
背景图片可以放置于 content-box、padding-box 或 border-box 区域。

div
{
  /*background:url(bg_flower.gif) no-repeat;*/
  background-size:100% 100%;
  -webkit-background-origin:content-box; /* Safari */
  background-origin:content-box;
}

多重背景图片（可以为元素使用多个背景图像）

body { 
  background-image:url(bg_flower.gif),url(bg_flower_2.gif);
}

规定背景的绘制区域（background-clip）

兼容性
IE9+、Firefox、Opera、Chrome 以及 Safari 支持 background-clip 属性。

可取值
border-box 背景被裁剪到边框盒。
padding-box 背景被裁剪到内边距框。
content-box 背景被裁剪到内容框。

div {
  background-color:yellow;
  background-clip:content-box;
}

文本效果：

兼容性
Internet Explorer 10、Firefox、Chrome、Safari 以及 Opera 支持 text-shadow 属性。
所有主流浏览器都支持 word-wrap 属性。

文本阴影（text-shadow）：

h1 {
text-shadow: 5px 5px 5px #FF0000;
}

自动换行 / 对长的不可分割的单词进行分割并换行到下一行（word-wrap）：
值可以是normal，break-word（在长单词或 URL 地址内部进行换行）。
p {word-wrap:break-word;}

更多：

规定非中日韩文本的换行规则（word-break）：

所有主流浏览器都支持 word-break 属性。

值可以是normal，break-all（允许在单词内换行），keep-all（只能在半角空格或连字符处换行）
p{word-break: normal;}

当文本溢出包含元素时发生的事情（text-overflow）：

所有主流浏览器都支持 text-overflow 属性。

值可以是clip（修剪文本），ellipsis（显示省略符号来代表被修剪的文本。），string（使用给定的字符串来代表被修剪的文本。）
例子：http://www.w3school.com.cn/tiy/t.asp?f=css3_text-overflow_hover

当 text-align 设置为 "justify" 时所使用的对齐方法（text-justify）：

只有 Internet Explorer 支持 text-justify 属性。
值可以是：auto，none（禁用齐行），inter-word（增加/减少单词间的间隔），inter-ideograph（用表意文本来排齐内容），inter-cluster（只对不包含内部单词间隔的内容（比如亚洲语系）进行排齐），distribute（类似报纸版面，除了在东亚语系中最后一行是不齐行的），kashida（通过拉伸字符来排齐内容）。

标点字符是否位于线框之外（hanging-punctuation）

目前主流浏览器都不支持 hanging-punctuation 属性。

值可以是：none（不在文本整行的开头还是结尾的行框之外放置标签符号），first（标点附着在首行开始边缘之外），last（标点附着在首行结尾边缘之外），allow-end，force-end

文本轮廓（text-outline）：

所有主流浏览器都不支持 text-outline 属性。

值：thickness（必需。轮廓的粗细），blur（可选。轮廓的模糊半径），color（必需。轮廓的颜色）
text-outline: thickness blur color;

文本的换行（折行）规则（text-wrap）：

目前主流浏览器都不支持 text-wrap 属性。

值可以是：normal，none （不换行），unrestricted （在任意两个字符间换行），suppress（压缩元素中的换行。浏览器只在行中没有其他有效换行点时进行换行。）
p{text-wrap: normal;}

text-emphasis是简写属性，用于设置 text-emphasis-style 和 text-emphasis-color。

目前主流浏览器都不支持 text-emphasis 属性。

text-emphasis-style 向元素的文本应用重点标记。
text-emphasis-color 定义重点标记的前景色。

如果标点位于行开头或结尾处，或者临近另一个全角标点符号，是否对标点符号进行修剪。（punctuation-trim）

目前主流浏览器都不支持 punctuation-trim 属性。

值可以是：none，start（修剪每行结尾的开启标点符号），end（修剪每行结尾的闭合标点符号），allow-end，adjacent

设置如何对齐最后一行或紧挨着强制换行符之前的行（text-align-last）？？？

字体：

当您您找到或购买到希望使用的字体时，可将该字体文件存放到 web 服务器上，它会在需要时被自动下载到用户的计算机上。

@font-face 规则

Firefox、Chrome、Safari 以及 Opera 支持 .ttf (True Type Fonts) 和 .otf (OpenType Fonts) 类型的字体。
Internet Explorer 9+ 支持新的 @font-face 规则，但是仅支持 .eot 类型的字体 (Embedded OpenType)。

在新的 @font-face 规则中，您必须首先定义字体的名称（比如 myFirstFont），然后指向该字体文件。
如需为 HTML 元素使用字体，请通过 font-family 属性来引用字体的名称 (myFirstFont)：

@font-face
{
font-family: myFirstFont;
src: url('Sansation_Light.ttf'),
     url('Sansation_Light.eot'); /* IE9+ */
}

div
{
font-family:myFirstFont;
}

您必须为粗体文本添加另一个包含描述符的 @font-face：

@font-face
{
font-family: myFirstFont;
src: url('Sansation_Bold.ttf'),
     url('Sansation_Bold.eot'); /* IE9+ */
font-weight:bold;
}

文件 "Sansation_Bold.ttf" 是另一个字体文件，它包含了 Sansation 字体的粗体字符。
只要 font-family 为 "myFirstFont" 的文本需要显示为粗体，浏览器就会使用该字体。
通过这种方式，我们可以为相同的字体设置许多 @font-face 规则。

除了font-family，src必须的描述符外，更多字体描述符：
font-stretch（定义如何拉伸字体），font-style（定义字体的样式），font-weight（定义字体的粗细），unicode-range（定义字体支持的UNICODE字符范围）
http://www.w3school.com.cn/css3/css3_font.asp

2D 转换：对元素进行移动、缩放、转动、拉长或拉伸。

Internet Explorer 10、Firefox 以及 Opera 支持 transform 属性。
Chrome 和 Safari 需要前缀 -webkit-。
注释：Internet Explorer 9 需要前缀 -ms-。

transform属性：向元素应用 2D 或 3D 转换。

transform-origin属性：允许你改变被转换元素的位置。

translate()：元素从其当前位置移动，根据给定的 left（x 坐标） 和 top（y 坐标） 位置参数：

translate(50px,100px) 把元素从左侧移动 50 像素，从顶端移动 100 像素。

div {
transform: translate(50px,100px);
-ms-transform: translate(50px,100px);       /* IE 9 */
-webkit-transform: translate(50px,100px);   /* Safari and Chrome */
-o-transform: translate(50px,100px);        /* Opera */
-moz-transform: translate(50px,100px);      /* Firefox */
}

translateX(n) 定义 2D 转换，沿着 X 轴移动元素。

translateY(n) 定义 2D 转换，沿着 Y 轴移动元素。

rotate()：元素顺时针旋转给定的角度。允许负值，元素将逆时针旋转。

rotate(30deg) 把元素顺时针旋转 30 度。

div {
transform: rotate(30deg);
-ms-transform: rotate(30deg);       /* IE 9 */
-webkit-transform: rotate(30deg);   /* Safari and Chrome */
-o-transform: rotate(30deg);        /* Opera */
-moz-transform: rotate(30deg);      /* Firefox */
}

scale()：元素的尺寸会增加或减少，根据给定的宽度（X 轴）和高度（Y 轴）参数：

scale(2,4) 把宽度转换为原始尺寸的 2 倍，把高度转换为原始高度的 4 倍。

div {
transform: scale(2,4);
-ms-transform: scale(2,4);  /* IE 9 */
-webkit-transform: scale(2,4);  /* Safari 和 Chrome */
-o-transform: scale(2,4);   /* Opera */
-moz-transform: scale(2,4); /* Firefox */
}

scaleX(n) 定义 2D 缩放转换，改变元素的宽度。

scaleY(n) 定义 2D 缩放转换，改变元素的高度。

skew()：元素翻转给定的角度，根据给定的水平线（X 轴）和垂直线（Y 轴）参数：

skew(30deg,20deg) 围绕 X 轴把元素翻转 30 度，围绕 Y 轴翻转 20 度。

div {
transform: skew(30deg,20deg);
-ms-transform: skew(30deg,20deg);   /* IE 9 */
-webkit-transform: skew(30deg,20deg);   /* Safari and Chrome */
-o-transform: skew(30deg,20deg);    /* Opera */
-moz-transform: skew(30deg,20deg);  /* Firefox */
}

skewX(angle) 定义 2D 倾斜转换，沿着 X 轴。

skewY(angle) 定义 2D 倾斜转换，沿着 Y 轴。

matrix()：把所有 2D 转换方法组合在一起。需要六个参数，包含数学函数，允许您：旋转、缩放、移动以及倾斜元素。

将 div 元素旋转 30 度：http://www.w3school.com.cn/tiy/t.asp?f=css3_transform_matrix

div {
transform:matrix(0.866,0.5,-0.5,0.866,0,0);
-ms-transform:matrix(0.866,0.5,-0.5,0.866,0,0);     /* IE 9 */
-moz-transform:matrix(0.866,0.5,-0.5,0.866,0,0);    /* Firefox */
-webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Safari and Chrome */
-o-transform:matrix(0.866,0.5,-0.5,0.866,0,0);      /* Opera */
}

3D转换：

Internet Explorer 10 和 Firefox 支持 3D 转换。
Chrome 和 Safari 需要前缀 -webkit-。
Opera 仍然不支持 3D 转换（它只支持 2D 转换）。

rotateX()：元素围绕其 X 轴以给定的度数进行旋转。

div {
transform: rotateX(120deg);
-webkit-transform: rotateX(120deg); /* Safari 和 Chrome */
-moz-transform: rotateX(120deg);    /* Firefox */
}

rotateY()：元素围绕其 Y 轴以给定的度数进行旋转。

div {
transform: rotateY(130deg);
-webkit-transform: rotateY(130deg); /* Safari 和 Chrome */
-moz-transform: rotateY(130deg);    /* Firefox */
}

|转换属性|are|
|------|--------|----|
|transform|向元素应用 2D 或 3D 转换。|
|transform-origin|允许你改变被转换元素的位置。|
|transform-style|规定被嵌套元素如何在 3D 空间中显示。|
|perspective|规定 3D 元素的透视效果。|
|perspective-origin|规定 3D 元素的底部位置。|
|backface-visibility|定义元素在不面对屏幕时是否可见。|

2D Transform 方法 are
matrix3d() 定义 3D 转换，使用 16 个值的 4x4 矩阵。
translate3d(x,y,z) 定义 3D 转化。
translateX(x) 定义 3D 转化，仅使用用于 X 轴的值。
translateY(y) 定义 3D 转化，仅使用用于 Y 轴的值。
translateZ(z) 定义 3D 转化，仅使用用于 Z 轴的值。
scale3d(x,y,z) 定义 3D 缩放转换。
scaleX(x) 定义 3D 缩放转换，通过给定一个 X 轴的值。
scaleY(y) 定义 3D 缩放转换，通过给定一个 Y 轴的值。
scaleZ(z) 定义 3D 缩放转换，通过给定一个 Z 轴的值。
rotate3d(x,y,z,angle) 定义 3D 旋转。
rotateX(angle) 定义沿 X 轴的 3D 旋转。
rotateY(angle) 定义沿 Y 轴的 3D 旋转。
rotateZ(angle) 定义沿 Z 轴的 3D 旋转。
perspective(n) 定义 3D 转换元素的透视视图。

过渡：当元素从一种样式变换为另一种样式时为元素添加效果。

Internet Explorer 10、Firefox、Chrome 以及 Opera 支持 transition 属性。
Safari 需要前缀 -webkit-。
注释：Internet Explorer 9 以及更早的版本，不支持 transition 属性。
注释：Chrome 25 以及更早的版本，需要前缀 -webkit-。

值：规定您希望把效果添加到哪个 CSS 属性上；规定效果的时长；

注释：如果时长未规定，则不会有过渡效果，因为默认值是 0。

效果开始于指定的 CSS 属性改变值时。

例子：应用于宽度属性的过渡效果，时长为 2 秒：

div {
transition: width 2s;
-moz-transition: width 2s;  /* Firefox 4 */
-webkit-transition: width 2s;   /* Safari 和 Chrome */
-o-transition: width 2s;    /* Opera */
}

div:hover { width:300px; }    /*当指针移出元素时，它会逐渐变回原来的样式。*/

多项改变，添加多个属性，由逗号隔开：
例子：向宽度、高度和转换添加过渡效果：

div {
transition: width 2s, height 2s, transform 2s;
-moz-transition: width 2s, height 2s, -moz-transform 2s;
-webkit-transition: width 2s, height 2s, -webkit-transform 2s;
-o-transition: width 2s, height 2s,-o-transform 2s;
}
过渡属性 are
transition 简写属性，用于在一个属性中设置四个过渡属性。
transition-property 规定应用过渡的 CSS 属性的名称。
transition-duration 定义过渡效果花费的时间。默认是 0。
transition-timing-function 规定过渡效果的时间曲线。默认是 "ease"。
transition-delay 规定过渡效果何时开始。默认是 0。 
div {
transition: width 1s linear 2s;
/* Firefox 4 */
-moz-transition:width 1s linear 2s;
/* Safari and Chrome */
-webkit-transition:width 1s linear 2s;
/* Opera */
-o-transition:width 1s linear 2s;
}

动画：

Internet Explorer 10、Firefox 以及 Opera 支持 @keyframes 规则和 animation 属性。
Chrome 和 Safari 需要前缀 -webkit-。
注释：Internet Explorer 9，以及更早的版本，不支持 @keyframe 规则或 animation 属性。

@keyframes 规则用于创建动画。

两个值：规定动画的名称；规定动画的时长

您必须定义动画的名称和时长。如果忽略时长，则动画不会允许，因为默认值是 0。

创建动画时，需要把它捆绑到某个选择器，否则不会产生动画效果。

用百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于 0% 和 100%。为了得到最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器。

@keyframes myfirst {
from {background: red;}
to {background: yellow;}
}

@-moz-keyframes myfirst { /* Firefox */
from {background: red;}
to {background: yellow;}
}

@-webkit-keyframes myfirst { /* Safari 和 Chrome */
from {background: red;}
to {background: yellow;}
}

@-o-keyframes myfirst { /* Opera */
from {background: red;}
to {background: yellow;}
}

div {
animation: myfirst 5s;
-moz-animation: myfirst 5s; /* Firefox */
-webkit-animation: myfirst 5s;  /* Safari 和 Chrome */
-o-animation: myfirst 5s;   /* Opera */
}
动画属性 are
@keyframes 规定动画。
animation 所有动画属性的简写属性，除了 animation-play-state 属性。
animation-name 规定 @keyframes 动画的名称。
animation-duration 规定动画完成一个周期所花费的秒或毫秒。默认是 0。
animation-timing-function 规定动画的速度曲线。默认是 "ease"。
animation-delay 规定动画何时开始。默认是 0。
animation-iteration-count 规定动画被播放的次数。默认是 1。
animation-direction 规定动画是否在下一周期逆向地播放。默认是 "normal"。
animation-play-state 规定动画是否正在运行或暂停。默认是 "running"。
animation-fill-mode 规定对象动画时间之外的状态。 
div {
animation: myfirst 5s linear 2s infinite alternate;
/* Firefox: */
-moz-animation: myfirst 5s linear 2s infinite alternate;
/* Safari 和 Chrome: */
-webkit-animation: myfirst 5s linear 2s infinite alternate;
/* Opera: */
-o-animation: myfirst 5s linear 2s infinite alternate;
}

多列

Internet Explorer 10 和 Opera 支持多列属性。
Firefox 需要前缀 -moz-。
Chrome 和 Safari 需要前缀 -webkit-。
注释：Internet Explorer 9 以及更早的版本不支持多列属性。

元素应该被分隔的列数（column-count）

例子：把 div 元素中的文本分隔为三列：

div {
-moz-column-count:3;    /* Firefox */
-webkit-column-count:3; /* Safari 和 Chrome */
column-count:3;
}

列之间的间隔（column-gap）

例子：规定列之间 40 像素的间隔：

div {
-moz-column-gap:40px;       /* Firefox */
-webkit-column-gap:40px;    /* Safari 和 Chrome */
column-gap:40px;
}

设置列之间的宽度、样式和颜色规则（column-rule）是column-rule-color，column-rule-style ，column-rule-width的简写属性。

div {
-moz-column-rule:3px outset #ff0000;    /* Firefox */
-webkit-column-rule:3px outset #ff0000; /* Safari and Chrome */
column-rule:3px outset #ff0000;
}

元素应横跨多少列（column-span）

Internet Explorer 10 和 Opera 支持 column-span 属性。
Safari 和 Chrome 支持替代的 -webkit-column-span 属性。
注释：Internet Explorer 9 以及更早版本的浏览器不支持 column-span 属性。

值可以是1，all

列的宽度（column-width）

Internet Explorer 10 和 Opera 支持 column-width 属性。
Firefox 支持替代的 -moz-column-width 属性。
Safari 和 Chrome 支持替代的 -webkit-column-width 属性。
注释：Internet Explorer 9 以及更早版本的浏览器不支持 column-width 属性。

值可以是auto，长度值。

规定列的宽度和列数（columns），是column-width和column-count的简写属性。

Internet Explorer 10 和 Opera 支持 column 属性。
Firefox 支持替代的 -moz-column 属性。
Safari 和 Chrome 支持替代的 -webkit-column 属性。
注释：Internet Explorer 9 以及更早版本的浏览器不支持 column 属性。

如何填充列（column-fill）

主流浏览器都不支持 column-fill 属性。

值可以是balance，auto

用户界面：特性包括重设元素尺寸、盒尺寸以及轮廓等。

Firefox、Chrome 以及 Safari 支持 resize 属性。
Internet Explorer、Chrome、Safari 以及 Opera 支持 box-sizing 属性。Firefox 需要前缀 -moz-。
所有主流浏览器都支持 outline-offset 属性，除了 Internet Explorer。

是否可由用户调整元素尺寸（resize）

例子：规定 div 元素可由用户调整大小：

div {
resize:both;
overflow:auto;
}

以确切的方式定义适应某个区域的具体内容（box-sizing）

例子：规定两个并排的带边框方框：

div {
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
-webkit-box-sizing:border-box;  /* Safari */
width:50%;
float:left;
}

对轮廓进行偏移，并在超出边框边缘的位置绘制轮廓（outline-offset）

轮廓与边框有两点不同：轮廓不占用空间；轮廓可能是非矩形

例子：规定边框边缘之外 15 像素处的轮廓：

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

appearance 允许您将元素设置为标准用户界面元素的外观

所有主流浏览器都不支持 appearance 属性。
Firefox 支持替代的 -moz-appearance 属性。
Safari 和 Chrome 支持替代的 -webkit-appearance 属性。

值可以是normal，icon，window，button，menu，field

例子：使 div 元素看上去像一个按钮：

div {
appearance:button;
-moz-appearance:button; /* Firefox */
-webkit-appearance:button; /* Safari 和 Chrome */
}

icon 为创作者提供使用图标化等价物来设置元素样式的能力。

目前没有浏览器支持 icon 属性。

值可以是auto，url()

例子：将图像元素设置为图标化的等价物：

img {
content:icon;
icon:url(imgicon.png);
}

nav-down 规定在使用 arrow-down 导航键时向何处导航。

目前只有 Opera 支持 nav-down 属性。

值可以是auto，id（被导航元素的id），target-name（被导航的目标框架），

button#b1 {
top:20%;left:25%;
nav-index:1;
nav-right:#b2;nav-left:#b4;
nav-down:#b2;nav-up:#b4;
}

button#b2 {
top:40%;left:50%;
nav-index:2;
nav-right:#b3;nav-left:#b1;
nav-down:#b3;nav-up:#b1;
}

button#b3 {
top:70%;left:25%;
nav-index:3;
nav-right:#b4;nav-left:#b2;
nav-down:#b4;nav-up:#b2;
}

button#b4 {
top:40%;left:0%;
nav-index:4;
nav-right:#b1;nav-left:#b3;
nav-down:#b1;nav-up:#b3;
}

nav-index 设置元素的 tab 键控制次序。

目前只有 Opera 支持 nav-index 属性。

值可以是auto，number（指示元素的导航键控制次序。1 代表第一个。）

nav-left 规定在使用 arrow-left 导航键时向何处导航。

目前只有 Opera 支持 nav-left 属性。

值可以是auto，id（被导航元素的id），target-name（被导航的目标框架），

nav-right 规定在使用 arrow-right 导航键时向何处导航。

目前只有 Opera 支持 nav-right 属性。

值可以是auto，id（被导航元素的id），target-name（被导航的目标框架），

nav-up 规定在使用 arrow-up 导航键时向何处导航。

目前只有 Opera 支持 nav-up 属性。

值可以是auto，id（被导航元素的id），target-name（被导航的目标框架），

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

推荐阅读更多精彩内容