CSS3实现11种经典的技术

已重新编辑本文，当时可能是少复制了最底下部分内容，你就不能好好提醒一下？没看见前面转载都有留吗？非得以威胁的语气来说吗？你TMD以为是工信部啊？脑子被门挤了吧，还公布我的不良行为？你以为你是谁？SB行为，脑残？骂你是因为你口气不对，这样的人想起来就想拿块砖头砸过去，你要看到了就好好反省下吧。这个博客也就是平时没事记录下看到的好文章，我承认你们站的文章都挺好，但是就你这口气实在让人气愤，也懒得回你QQ，你们爱公布不公布，你TMD有能力关了我们这个站，我是无所谓

一、圆角制作

<style type="text/css">
.box {
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
</style>

<div class="box">

</div>

二、阴影效果

<style type="text/css">
.box {
box-shadow: 5px 5px 2px black;
-moz-box-shadow: 5px 5px 2px black;
-webkit-box-shadow: 5px 5px 2px black;
}
</style>

<div class="box">

</div>

三、文字阴影效果

<style type="text/css">
.font {
font-size: 20px;
color: #2178d9;
}
.font {
text-shadow: 0 1px 0 #000;
}
</style>

<span class="font">The quick brown fox jumps over the lazy dog.</span>

四、自定义字体

<style type="text/css">
@font-face {
font-family: '微软雅黑';
src: url('yahei.ttf');
}
.font {
font-family: '微软雅黑';
font-size: 20px;
}
</style>

<span class="font">The quick brown fox jumps over the lazy dog.</span>

五、透明元素

<style type="text/css">
.box {
opacity: .6;
}
</style>

<div class="box">

</div>

六、RGBA

<style type="text/css">
.box {
background: rgba(239, 182, 29, .25);
}
</style>

<div class="box">

</div>

七、背景图片尺寸

<style type="text/css">
.box {
background: #ccc url(http://d2o0t5hpnwv4c1.cloudfront.net/423_screenr/200x200.jpg) no-repeat;
-webkit-background-size: 50%; /* Safari */
-o-background-size: 50%; /* Opera */
-khtml-background-size: 50%; /* Konqueror */
       -moz-background-size: 50%; /* Firefox */
       background-size: 50%; /* w3c */
}
</style>

<div class="box">

</div>

八、多背景

<style type="text/css">
.box {
width: 200px;
height: 150px;
background: url(images/text.png) center center no-repeat, url(images/bg.png) repeat-x;
}
</style>

<div class="box">

</div>

九、多栏排版

<style type="text/css">
.columns {
-moz-column-count: 2;
-webkit-column-count: 2;
}
</style>

<div class="columns">
<pCSS即层叠样式表（Cascading Stylesheet）。在网页制作时采用CSS技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。只要对相应的代码做一些简单的修改，就可以改变同一页面的不同部分，或者页数不同的网页的外观和格式。CSS3是CSS技术的升级版本，CSS3语言开发是朝着模块化发展的。以前的规范作为一个模块实在是太庞大而且比较复杂，所以，把它分解为一些小的模块，更多新的模块也被加入进来。这些模块包括：盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等。CSS3将完全向后兼容，所以没有必要修改现在的设计来让它们继续运作。网络浏览器也还将继续支持CSS2。CSS3主要的影响是将可以使用新的可用的选择器和属性，这些会允许实现新的设计效果（譬如动态和渐变），而且可以很简单的设计出现在的设计效果（比如说使用分栏）。</p>
<p>CSS即层叠样式表（Cascading Stylesheet）。在网页制作时采用CSS技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。只要对相应的代码做一些简单的修改，就可以改变同一页面的不同部分，或者页数不同的网页的外观和格式。CSS3是CSS技术的升级版本，CSS3语言开发是朝着模块化发展的。以前的规范作为一个模块实在是太庞大而且比较复杂，所以，把它分解为一些小的模块，更多新的模块也被加入进来。这些模块包括：盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等。CSS3将完全向后兼容，所以没有必要修改现在的设计来让它们继续运作。网络浏览器也还将继续支持CSS2。CSS3主要的影响是将可以使用新的可用的选择器和属性，这些会允许实现新的设计效果（譬如动态和渐变），而且可以很简单的设计出现在的设计效果（比如说使用分栏）。</p>
</div>

十、图片边框

<style type="text/css">
.box {
border-width: 20px;
-webkit-border-image: url(images/border.png) 27 round;
-moz-border-image: url(images/border.png) 27 round;
border-image: url(images/border.png) 27 round;
}
</style>

<div class="box">

</div>

十一、动画效果

<style type="text/css">
.box {
position: relative;
-webkit-transition: top 300ms linear;
       -moz-transition: top 300ms linear;
       -o-transition: top 300ms linear;
       -ms-transition: top 300ms linear;
       transition: top 300ms linear;
}
.box:hover {
top: 20px;
}
</style>

<div class="box">

</div>

CSS3实现11种经典的技术

文章评论