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">
        <!–CONTENT–>
    </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">
        <!–CONTENT–>
    </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">
        <!–CONTENT–>
    </div>
    

六、RGBA

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

    <div class="box">
        <!–CONTENT–>
    </div>
    

七、背景图片尺寸

    <style type="text/css">
    .box {
    background: #ccc url(http://d2o0t5hpnwv4c1.cloudfront.net/423_screenr/200×200.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">
        <!–CONTENT–>
    </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">
        <!–CONTENT–>
    </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">
        <!–CONTENT–>
    </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">
        <!–CONTENT–>
    </div>

zhaoan

一个不起眼的IT工作者,从事过的行业较多,医疗保健、医院、月子会所、机电、重卡、软件,涉及的岗位也较多,零售、市场、平面设计、网站设计、UI设计、前端开发、后端开发、网络布线、设备维护、服务器维护、网络推广、网站运营、新媒体运营、部门管理等等,每个岗位工作基本都能独立完成,但是涉及面广导致都不精通,学习还在继续中。。。

You may also like...