《
web设计师必须熟练掌握的10个CSS3属性》文章地址：http://www.tfxk.com/wangyesheji/jianzhanjingyan/0302336342013.htm
<ul>
<li>
<a href="#"> Hover Over Me </a>
</li>
<li>
<a href="#"> Hover Over Me </a>
</li>
<li>
,Web设计师应该知道的十个SEO常识; <a href="#"> Hover Over Me </a>
</li>
<li>
<a href="#"> Hover Over Me </a>
</li>
</ul>
box-shadow的四个参数
对，就是这么做，分离定义background-size的x，y参数。 最新版本的Chrome 和 Safari支持此属性，但我们仍是要用旧的方法支持旧的浏览器。
Multiple Backgrounds
9. Resize
body {
background: url(path/to/image.jpg) no-repeat;
-moz-background-size: 100% 100%;
-o-background-size: 100% 100%;
-webkit-background-size: 100% 100%;
background-size: 100% 100%;
}
4. Text-Stroke
<div>
<img src="tuts.jpg" alt="Tuts" />
</div>
Clever Shadows
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
,web网页交互设计 页面表达常用方式; 也许CSS3最令人高兴的增补，就是在没有 JavaScript 的元素的情况下产活泼画。似乎IE9还不支持此功能，但这并不代表你不能使用这个功效，要害是在于进步技巧。 现在模拟一个效果，当鼠标滑过右侧链接时，文本向右滑动。
Background属性在CSS3样式中已经彻底改造，开端支持多背景图片。 举个简单的例子，如果没和适合的图像，我们将使用两个教程的图像作为我们的背景，当然在程序中你可能会用纹理，兴许是渐变作为图像。
只有Firefox 4和Safari 3支持此属性。Resize是CSS3 UI模型中的一部门，可用于重定义textarea的大小。
aside {
display: block; /* cause is HTML5 element */
background: red;
接下来分辨定义#main和aside的背风景
首先我们要设定一个容器，然后指定它的宽和高，即使是没有本质性的内容在里面。
Text-Outline
display: -moz-box;
display: -webkit-box;
,Web网站前端优化策略总结; display: box;
-moz-box-orient: horizontal; /* the default, so not really necessary here */
-webkit-box-orient: horizontal;
box-orient: horizontal;
-moz-box-pack: center;
-moz-box-align: center;
-webkit-box-pack: center;
-webkit-box-align: center;
box-pack: center;
box-align: center;
Tag：web 设计师 CSS3属性 web 设计师 CSS3属性
3. Text-shadow
Text-shadow是我们可以省略前缀的几个CSS属性之一，类似的还有box-shadow，它必须运用于文本，并它们有雷同的四个参数：
目前我们已经可以使用这种比拟机动的方法去重定义背景图像的大小。
#main {
background: yellow;
width: 800px;
}
z-index: -1; /* hide shadow behind image */
以上，通过逗号分隔符，插入了两张背景图像，第一个的定位是（0，0），第二个的定位是（100%，0）。 要肯定你对不支持的浏览器使用了备用图片，否则，它将跳此属性，使背景图像留空。 对旧浏览器的弥补要增加一张独自的图像给老浏览器用，像IE7。要定义两遍background，一遍是为老浏览器，另一遍是重写。或者你可以再次查看下 Modernizr。
x-offset 程度位移
y-offest 垂直位移
blur 含混值
color of shadow 阴影颜色
transition 有三个参数：
8. Flexible Box Model
使用这个属性后，不论#main有多宽，aside都将盘踞全部可用的空间。同时你也不用担忧诸如float等发生的问题，像使得元素被排斥到下一 行。
值得一提的是，虽然我们设置了display:box模型，它的子元素会占据整个垂直空间。这就是它的默认box-align属性stretch。 看看有什么效果产生，当我们设置了#main的宽度后。
body { background: white; }
body, html { height: 100%; }
width: 70%;
left: 15%; /* one half of the remaining 30% (see width above) */
上面的代码使得背景图像已经占据了整个可用空间。但是，如果我们使用一个特别的图片去占据body元素的整个空间而无论窗口有多宽，那又怎么做？
建站学之前曾屡次介绍过有关HTML5和CSS3的相干文章，他们的崛起已经让越来越多的设计师开始为之猖狂，我们要快人一步，虽然现在良多浏览器对他们的支持还不是很好，但是我们也要走在别人的前面，技巧是永远都不能落伍的，本文将为你详细先容web设计师必须纯熟把握的10个CSS3属性。
为什么我们不将transition直接利用到hover上呢？是由于我们只是在mouseover时生效，当mouseout时元素将立刻返回到 其最初的状况。 因为我们对后果做了调整，所有对旧的浏览器不会产生任何影响。 接下来是通过文章所学，我们来树立的一个简练的效果。大家可以通过查看源码来学习来。详细如何创建我就不翻译了。
接下来是十分广泛的Box-shadow，能够使你的元素即时丑化，只是记得不要把值设得太离谱。
h1 {
-webkit-text-stroke: 3px black;
color: white;
}
首先我们设定一个h1元素，而后履行，通过款式属性以断定-webkit-text-stroke是否支撑此元素。假如不支持，咱们会把题目由白色 设置成玄色。
<textarea name="elem" id="elem",Web界面设计 Web可读性的三个层次; rows="5" cols="50"></textarea>
background: #e3e3e3;
margin: auto;
height: 100px;
bottom: 0;
}
The CSS
x-offset x轴偏移
y-offset y轴偏移
blur 隐约值
color of shadow 阴影颜色
现在，很多人不知道可以一次应用多个box-shadows，这样做会产生一些有趣的效果。在下图中，我使用蓝色和绿色暗影来放大一下效果。
我只是在这儿浮浅的说一下，请参阅保罗爱尔兰优良文章的具体信息。然而，使用此方式的时候也应注意一下兼容问题，例如老的浏览器应当先测试下，并且 供给必要的备注。
Box-shadow
或者你会斟酌当鼠标经过期显示全体的文本内容。
a:hover {
padding-left: 6px;
}
1. Border-radius
The CSS
aside {
background: red;
}
6. background-size
如果想再增添点效果，我们可以利用Flexible Box Model（详情在8中）来使得文字在垂直在水平方向都居中。这需要加点代码，但这仅仅是对不同浏览器的补偿。
,Web标准 DIV+CSS对SEO的帮助; ul a {
-webkit-transition: padding .4s;
,web性能优化如何做; -moz-transition: padding .4s;
-o-transition: padding .4s;
transition: padding .4s;
}
10、Transition
h1 {
text-shadow: 0 1px 0 black, 0 -1px 0 black, 1px 0 0 black, -1px 0 0 black;
color: white;
}
默认情形下webkit浏览器和Firefox 4支持水温和垂直方向上的重定义。
5. Multiple Backgrounds
#main {
background: yellow;
}
textarea {
-moz-resize: vertical;
-webkit-resize: vertical;
resize: vertical;
}
.box {
/* fallback */
background: url(image/path.jpg) no-repeat;
.box {
-o-text-overflow: ellipsis;
text-overflow:ellipsis;
,Web开发设计的五大准则; overflow:hidden;
,web开发注意事项; ,WEB建站规划分析之建站目的; white-space:nowrap;
border: 1px solid black;
width: 400px;
padding: 20px;
cursor: pointer;
}
#container {
width: 960px;
height: 500px; /* just for demo */
2. Box-shadow
浏览器最初开发文本溢出属性可以设定两个值：clip ellipsis 此属性支持堵截容器中的文本，而且也给出了一个省略号的特征。
/* www.jzxue.com*/
background: url(image/path.jpg) 0 0 no-repeat,
url(image2/path.jpg) 100% 0 no-repeat;
}
许多读者也许不会心识到我们可以用这个属性来做一个圆。
both： 重定义水平和垂直方向
horizontal： 水平调整大小制约
vertical： 垂直调剂大小限度
none： 不支稳重定义
<div id="container">
<div id="main"> Main content here </div>
<aside> Aside content here </aside>
</div>
到目前为了还不看出什么效果来。
background: url(path/to/image.jpg) no-repeat;
background-size: 100% 100%;
Flexible Box Model将终极使我们阔别相似float的困扰。固然是要给你的头部换一个新的属性，但一旦你这么做了，将毕生受益。 做个演示，创立简略的两列布局。
Feature Detection我们如作甚firefox提供一组可用的样式，和为另外的一组Safari或Chrome？解决措施就是多做测试。 通过feature detection，我们可以应用JavaScript来测试某属性是否可用，如果不行，我可 就要采取备用的。 再回到text-stroke的问题上，为不支持此属性的浏览器设定一个备用黑色（目前的除webkit外）。
Border-radius是一大堆CSS3属性中最受欢迎的一种，border-radius是CSS3中级别最高的一个属性。当设计者惧怕一个层在将在不同的浏览器之间以不同的方式显示时，CSS圆角，一个很低级的常识，将领导他们开始学习。 我们为移动浏览器提供一个备用的观看体验的主意都无比好。奇怪的是，当这种方法涌现在桌面浏览器上时，他们却又不这么认为。border-radius是一大堆CSS3属性中最受欢送的一种，border-radius是CSS3中级别最高的一个属性。当设计者畏惧一个层在将在不同的浏览器之间以不同的方式显示时，CSS圆角，一个很初级的知识，将引诱他们开始学习。我们为挪动浏览器提供一个备用的观看休会的设法都异常好。奇怪的是，当这种方法呈现在桌面浏览器上时，他们却又不这么以为。
h1 {
text-shadow: 0 1px 0 white;
color: #292929;
}
--> [
网站建设之]web设计师必需纯熟控制的10个CSS3属性
The property to transition. （Set this value to all if needed） 转换属性。（设置此值为所有如有须要）
The duration 连续时光
The easing type 缓动类型
/* take up all available space */
-moz-box-flex: 1;
-webkit-box-flex: 1;
box-flex: 1;
}
-webkit-box-shadow: 1px 1px 3px green, -1px -1px blue;
-moz-box-shadow: 1px 1px 3px green,-1px -1px blue;
box-shadow: 1px 1px 3px green, -1px -1px blue;
有点奇异，这看起来并不像是重置text-overflow属性或是停用它，使之生效，在on:hover中我们可以使得white-space的 normal属性。当初畸形了。 晓得吗？你还可以指定本人的字符串，应应用省略号的地位。这样做来润饰要显示的文本字符串。
7. text-overflow
圆
The HTML
/* modern browsers */
然而我们仍有个疑难，为什么aside不占领残余的全部空间呢？我们可以用新属性box-flex来试下。 box-flex 使得元素占据整个空间。
Text-Outline和box-shadow一样，它可以设置多个阴影通过逗号分隔符。例如，我们创建文本框的轮廓，当Webkit不支持stroke效果，我们可以使用下面的代码让更多的浏览器支持（虽然不是很雅观）。
使用这个办法时要注意了，只有Webkit（Safari， Chrome， iPhone）在最后的多少年内还支持这个属性。实在，虽然我可能是错的，Text-stroke还不属于CSS3范围的一局部。在这种情况下，使用白色字体时，Firefox会显示一个空缺页面。要解决此问题，你即可以使用Javascript，也可以通过使用一种不同于背景颜色的文字色彩。
#box:hover {
white-space: normal;
color: rgba(0,0,0,1);
background: #e3e3e3;
border: 1px solid #666;
}
/* The Shadow */
-webkit-box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);
-box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);
.box {
background: url(image/path.jpg) 0 0 no-repeat,
url(image2/path.jpg) 100% 0 no-repeat;
}
-webkit-border-radius: 4px;
-moz-border-radius: 4px,web前端：合理的设置字体的大小;
border-radius: 4px;
留神：请在Safari 5跟IE9阅读器中执行“border-radius”语法。
display: -moz-box;
display: -webkit-box;
display: box;
可能的值：
.box:after {
content: '';
position: absolute;
body {
background: url(path/to/image.jpg) no-repeat;
background-size: 100% 100%;
}
-webkit-box-shadow: 1px 1px 3px #292929;
-moz-box-shadow: 1px 1px 3px #292929;
box-shadow: 1px 1px 3px #292929;
var h1 = document.createElement('h1');
if ( !( 'webkitTextStroke' in h1.style ) ) {
var heading = document.getElementsByTagName('h1')[0];
heading.style.color = 'black';
}
(责任编辑：网站建设)
web设计师必须熟练掌握的10个CSS3属性相关文章