CSS3能做什么?

  CSS3给我们带来了什么好处呢?简单的说,CSS3把很多以前需要使用图片和脚本来实现的效果、甚至动画效果,只需要短短几行代码就能搞定。比如圆角,图片边框,文字阴影和盒阴影,过渡、动画等。

  CSS3简化了前端开发工作人员的设计过程,加快页面载入速度。

  CSS3都有哪些强大功能呢?各位小伙伴们先来一睹为快吧!

  选择器

  以前我们通常用class、 ID 或 tagname 来选择HTML元素,CSS3的选择器强大的难以置信。它们可以减少在标签中的class和ID的数量更方便的维护样式表、更好的实现结构与表现的分离。

  圆角效果

  以前做圆角通常使用背景图片,或繁琐的元素拼凑,现在很简单了 border-radius 帮你轻松搞定。

  

<!doctype html>
<html><head>  
<meta http-equiv="Content-Type" content="textwww.dztcsd.com//html; charset=UTF-8" /> 
<title>CSS3-Demo</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body> 


<div id="stage">
<div id="doraemon"> 
<div id="face"> 
    <div id="head_light"></div> 
    <div id="eyes"> 
    <div class="eye eye_left"></div> 
        <div class="black_eye black_left"></div> 
        
      <div class="eye eye_right"></div> 
        <div class="black_eye black_right"></div> 
        </div> 
        <div id="base"> 
<div id="base_white"></div> 
<div id="nose"> 
<div id="nose_light"></div> 
</div> 
                <div id="nose_line"></div> 
                <div id="mouth"></div> 
                <div id="mouth_rewrite"></div> 
                <div id="firefox_mouth"></div> 
 
<div class="whiskers whi_right_top rotate160"></div> 
<div class="whiskers whi_right"></div> 
<div class="whiskers whi_right_bottom rotate20"></div> 
                    
<div class="whiskers whi_left_top rotate20"></div> 
<div class="whiskers whi_left"></div> 
<div class="whiskers whi_left_bottom rotate160"></div> 
        </div> 
</div> 
    <div id="choker"> 
    <div id="belt"></div> 
    <div id="bell"> 
         <div id="bell_line"></div> 
            <div id="bell_circle"></div> 
            <div id="bell_under"></div> 
<div id="bell_light"></div> 
</div> 
    </div> 
<div id="body"> 
    <div id="doutai"></div> 
<div class="base_white2 doutai_center"></div> 
        <div id="pocket"> 
                <div id="circle"></div> 
                    <div id="circle_rewrite"></div> 
                </div> 
</div> 
<div id="hand_right"> 
    <div id="arm_right"></div> 
<div class="hand_circle hand_right"></div> 
<div class="arm_rewrite_right"></div> 
    </div> 
<div id="hand_left"> 
    <div id="arm_left"></div> 
<div class="hand_circle hand_left"></div> 
 <div class="arm_rewrite_left"></div> 
    </div> 
<div id="foot"> 
    <div id="foot_left"></div> 
        <div id="foot_right"></div> 
        <div id="foot_rewrite"></div> 
    </div> 
    <div id="shadow_doutai_arm"></div> 
    <div id="shadow_doutai_left"></div> 
    <div id="shadow_doutai_right"></div> 
        <div id="shadow_belt"></div> 
</div> 
</div>
</body>
</html>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
YOLO高分设计资源源码,详情请查看资源内容使用说明 YOLO高分设计资源源码,详情请查看资源内容使用说明 YOLO高分设计资源源码,详情请查看资源内容使用说明 YOLO高分设计资源源码,详情请查看资源内容使用说明YOLO高分设计资源源码,详情请查看资源内容使用说明YOLO高分设计资源源码,详情请查看资源内容使用说明YOLO高分设计资源源码,详情请查看资源内容使用说明YOLO高分设计资源源码,详情请查看资源内容使用说明YOLO高分设计资源源码,详情请查看资源内容使用说明YOLO高分设计资源源码,详情请查看资源内容使用说明YOLO高分设计资源源码,详情请查看资源内容使用说明YOLO高分设计资源源码,详情请查看资源内容使用说明YOLO高分设计资源源码,详情请查看资源内容使用说明YOLO高分设计资源源码,详情请查看资源内容使用说明YOLO高分设计资源源码,详情请查看资源内容使用说明YOLO高分设计资源源码,详情请查看资源内容使用说明YOLO高分设计资源源码,详情请查看资源内容使用说明YOLO高分设计资源源码,详情请查看资源内容使用说明YOLO高分设计资源源码,详情请查看资源内容使用说明YOLO高分设计资源源码,详情请查看资源内容使用说明YOLO高分设计资源源码,详情请查看资源内容使用说明YOLO高分设计资源源码,详情请查看资源内容使用说明YOLO高分设计资源源码,详情请查看资源内容使用说明YOLO高分设计资源源码,详情请查看资源内容使用说明YOLO高分设计资源源码,详情请查看资源内容使用说明YOLO高分设计资源源码,详情请查看资源内容使用说明

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值