<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Css3第一天 练习</title>

<style>

.nb{ border: 1px solid #ccc; padding: 10px 0; }

.rgba{ height: 100px; background-color: rgba(180,100,100,0.5); }

.shadow{ text-shadow: 2px 2px 2px #000; }

</style>

</head>

<body>

<h3>颜色 新增了RGBA、HSLA模式</h3>

<section class="rgba" >

<pre class="nb">

/*现代浏览器*/

opacity: .5;

/*IE678*/

filter:alpha(opacity = 50);

</pre>

</section>

<h3>盒子模型</h3>

<section>

<pre class="nb">

CSS3中可以通过box-sizing 来指定盒模型，即可指定为content-box、border-box，这样我们计算盒子大小的方式就发生了改变。

可以分成两种情况： 1、box-sizing: border-box 计算方式为content = width – border - padding 2、box-sizing: content-box 计算方式为content = width

</pre>

</section>

<h3>文字阴影</h3>

<section>

<p class="shadow"> 语法： text-shadow：水平偏移 垂直偏移 羽化大小 颜色 </p>

<pre class="nb">

语法： text-shadow：水平偏移 垂直偏移 羽化大小 颜色

</pre>

</section>

</body>

</html>

CSS3 Day1 练习的更多相关文章

  1. Day1 了解web前端

    Day1  了解web前端 一.职业发展路线: 前端页面制作.前端开发.前端架构师 二.1)前端工程师主要职责:   利用HTML/CSS/JavaScript等各种Web技术进行客户端产品的开发.完 ...

  2. 纯CSS3实现的一些酷炫效果

    之前在网上看到一些用纯CSS3实现的酷炫效果,以为实现起来比较困难,于是想看看具体是怎么实现的. 一.笑脸猫动画 实现效果如下: 这个实现起来确实比较麻烦,很多地方需要花时间,有耐心地调整. 1.先看 ...

  3. CSS3 border-radius边框圆角

    在CSS3中提供了对边框进行圆角设定的支持,可对边框1~4个角进行圆角样式设置. 目录 1. 介绍 2. value值的格式和类型 3. border-radius 1~4个参数说明 4. 在线示例 ...

  4. CSS3 3D立方体效果－transform也不过如此

    CSS3系列已经学习了一段时间了,第一篇文章写了一些css3的奇技淫巧,原文戳这里,还获得了较多网友的支持,在此谢过各位,你们的支持是我写文章最大的动力^_^. 那么这一篇文章呢,主要是通过一个3D立 ...

  5. 三分钟学会用 js + css3 打造酷炫3D相册

    之前发过该文,后来不知怎么回事不见了,现在重新发一下. 中秋主题的3D旋转相册 如图,这是通过Javascript和css3来实现的.整个案例只有不到80行代码,我希望通过这个案例,让正处于迷茫期的j ...

  6. 使用CSS3实现一个3D相册

    CSS3系列我已经写过两篇文章,感兴趣的同学可以先看一下CSS3初体验之奇技淫巧,CSS3 3D立方体效果-transform也不过如此 第一篇主要列出了一些常用或经典的CSS3技巧和方法:第二篇是一 ...

  7. Web大前端时代之：HTML5+CSS3入门系列

    准备来一波新技术,待续.... Old: 联系源码:https://github.com/dunitian/LoTHTML5 文档下载:https://github.com/dunitian/LoTD ...

  8. 07. Web大前端时代之：HTML5+CSS3入门系列~H5 地理位置

    Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 源码:https://github.com/duniti ...

  9. 前端制作动画的几种方式（css3，js）

    制作动态的网页是是前端工程师必备的技能,很好的实现动画能够极大的提高用户体验,增强交互效果,那么动画有多少实现方式,一直对此有选择恐惧症的我就总结一下,以便在开发的时候选择最好的实现方式. 1.css ...

随机推荐

  1. PHP学习 Cookie和Session

    <?phpheader("Content-type:text/html;charset=utf-8");session_start(); $_SESSION['count'] ...

  2. sass和less的几点不同

    1.申明和使用变量 sass使用$符号来标识变量(老版本的sass使用!来标识变量),比如$highlight-color和$sidebar-width. 与CSS属性不同,变量可以在css规则块定义 ...

  3. PAT甲题题解-1049. Counting Ones-数学问题

    n位数,总共有0~10^n-1共计10^n个数那么所有数出现的总次数变为n*(10^n)个数1出现的次数便是十分之一,所以n位数中,1出现的次数为n*10^(n-1)知道这一个后,接下来就方便求了. ...

  4. Spring学习总结之装配bean

    1．  XML中显式配置 规范,文件头: <?xml version=”1.0” encoding=”UTF-8”?>            <beans xmlns=http:// ...

  5. #Linux第四周学习总结——扒开系统调用的三层皮（上）

    Linux第四周学习总结--扒开系统调用的三层皮(上) 一.用户态.内核态和中断 系统调用通过库函数. 1.用户态和内核态 区分(不同的指令执行级别): 用户态:在相应的低执行状态下,代码的掌控范围受 ...

  6. 第二阶段冲刺——seven

    个人任务: 马佳慧:设计界面背景,统一风格. 王金萱:整体运行测试上传到公网上的程序. 季方:修改优化已上传的代码. 司宇航:整体调试程序继续优化. 站立会议: 任务看板和燃尽图:

  7. SDN 交换机迁移1

    A game-theoretic approach to elastic control in software-defined networking 2014 之前的交换机迁移的工作(ElastiC ...

  8. Day Four

    站立式会议 站立式会议内容总结 442 今天:整合主页两个部分的逻辑代码,主页及其跳转基本完成 遇到的问题:无 明天:阅读图书界面逻辑部分完成 331 今天:学习java反射添加类数据到数据库 遇到问 ...

  9. PAT 甲级 1085 Perfect Sequence

    https://pintia.cn/problem-sets/994805342720868352/problems/994805381845336064 Given a sequence of po ...

  10. C++11 初始化

    C++11 初始化 统一初始化语法        C++11新添加初始化列表 std::initializer_list<>类型,可以通过{}语法来构造初始化列表 .初始化列表是常数:一旦 ...