-
因为是给边框加图片，所以需要设置border属性再设置border-img属性，实质是用border属性去切割图片，repeat是重复，round是圆满地铺满，stretch是切割的中间元素有多远填多远
查看全部 -
box-shadow: [inline] X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式] [inline];
查看全部 -
input[type="text"]:disabled{background:#ccc;},将input中类型为text的不可用文本框的背景色设置为灰色
查看全部 -
CSS3背景 background-size
设置背景图片的大小，以长度值或百分比显示，还可以通过cover和contain来对图片进行伸缩。
语法：
background-size: auto | <长度值> | <百分比> | cover | contain
取值说明：
1、auto：默认值，不改变背景图片的原始高度和宽度；
2、<长度值>：成对出现如200px 50px，将背景图片宽高依次设置为前面两个值，当设置一个值时，将其作为图片宽度值来等比缩放；
3、<百分比>：0％~100％之间的任何值，将背景图片宽高依次设置为所在元素宽高乘以前面百分比得出的数值，当设置一个值时同上；
4、cover：顾名思义为覆盖，即将背景图片等比缩放以填满整个容器；
5、contain：容纳，即将背景图片等比缩放至某一边紧贴容器边缘为止。
查看全部 -
CSS3背景 background-clip
用来将背景图片做适当的裁剪以适应实际需要。
语法：
background-clip ： border-box | padding-box | content-box | no-clip
参数分别表示从边框、或内填充，或者内容区域向外裁剪背景。no-clip表示不裁切，和参数border-box显示同样的效果。
backgroud-clip默认值为border-box。效果如下图所示：
查看全部 -
CSS3背景 background-origin
设置元素背景图片的原始起始位置。
语法：
background-origin ： border-box | padding-box | content-box;
参数分别表示背景图片是从边框，还是内边距（默认值），或者是内容区域开始显示。
效果如下：
需要注意的是，如果背景不是no-repeat，这个属性无效，它会从边框开始显示。
查看全部 -
text-shadow可以用来设置文本的阴影效果。
语法：
text-shadow: X-Offset Y-Offset blur color;
X-Offset：表示阴影的水平偏移距离，其值为正值时阴影向右偏移，反之向左偏移；
Y-Offset：是指阴影的垂直偏移距离，如果其值是正值时，阴影向下偏移，反之向上偏移；
Blur：是指阴影的模糊程度，其值不能是负值，如果值越大，阴影越模糊，反之阴影越清晰，如果不需要阴影模糊可以将Blur值设置为0；
Color：是指阴影的颜色，其可以使用rgba色。
比如，我们可以用下面代码实现设置阴影效果。
text-shadow: 0 1px 1px #fff
查看全部 -
ext-overflow用来设置是否使用一个省略标记（...）标示对象内文本的溢出。
语法：
但是text-overflow只是用来说明文字溢出时用什么方式显示，要实现溢出时产生省略号的效果，还须定义强制文本在一行内显示（white-space:nowrap）及溢出内容为隐藏（overflow:hidden），只有这样才能实现溢出文本显示省略号的效果，代码如下：
text-overflow:ellipsis; overflow:hidden; white-space:nowrap;
同时，word-wrap也可以用来设置文本行为，当前行超过指定容器的边界时是否断开转行。
语法：
normal为浏览器默认值，break-word设置在长单词或 URL地址内部进行换行，此属性不常用，用浏览器默认值即可。
查看全部 -
“:root”选择器等同于<html>元素，简单点说：
:root{background:orange}html {background:orange;}得到的效果等同。
建议使用:root方法。
查看全部 -
“:read-write”选择器刚好与“:read-only”选择器相反，主要用来指定当元素处于非只读状态时的样式。
查看全部 -
CSS 关系选择符主要包括:包含选择符(E F)、子选择符(E>F)、相邻选择符(E+F)、兄弟选择符(E~F)。
查看全部 -
查看全部
-
none: 初始状态、动画第一帧、动画最后一帧、初始状态；
forwards:初始状态、动画第一帧、动画最后一帧；
backwards:动画第一帧、动画最后一帧、初始状态；
both:动画第一帧、动画最后一帧；查看全部 -
示例演示:
通过“::selection”选择器，将Web中选中的文本背景变成红色，文本变成绿色。
HTML代码：
<p>“::selection”伪元素是用来匹配突出显示的文本。浏览器默认情况下，选择网站文本是深蓝的背景，白色的字体，</p>
CSS代码：
::-moz-selection { background: red; color: green; } ::selection { background: red; color: green; }结果演示：
注意：
1、IE9+、Opera、Google Chrome 以及 Safari 中支持 ::selection 选择器。
2、Firefox 支持替代的 ::-moz-selection。
查看全部 -
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>boxshadow</title>
<style>
.boxshadow-outset{
width:100px;
height:100px;
box-shadow:9px 9px 6px #666,-9px -9px 6px #33CC00,0 0 8px 1px #000 inset;
}
.boxshadow-inset{
width:100px;
height:100px;
box-shadow:4px 4px 6px #666 inset;
}
.boxshadow-multi{
width:100px;
height:100px;
box-shadow:4px 2px 6px #f00, -4px -2px 6px #000, 0px 0px 12px 5px #33CC00 inset;
}
</style>
</head>
<body>
<h2>外阴影</h2>
<div class="boxshadow-outset">
</div>
<br />
<h2>内阴影</h2>
<div class="boxshadow-inset">
</div>
<br />
<h2>多阴影</h2>
<div class="boxshadow-multi">
</div>
</body>CSS3边框
</html>
查看全部
举报