<!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. DevOps on AWS之Cloudformation概念介绍篇

    Cloudformation的相关概念 AWS cloudformation是一项典型的(IAC)基础架构即代码服务..通过编写模板对亚马逊云服务的资源进行调用和编排.借助cloudformation ...

  2. 【GAN与NLP】GAN的原理 —— 与VAE对比及JS散度出发

    0. introduction GAN模型最早由Ian Goodfellow et al于2014年提出,之后主要用于signal processing和natural document proces ...

  3. webstorm开发微信小程序代码提醒(webstorm开发工具)

    使用了微信提供的开发工具是真心难用,卡顿厉害.中英文切写注释换相当不爽.还没办法多开窗口,相信大家也遇到过这种现象. 下边我们介绍下webstorm来开发微信小程序的一些配置: File---sett ...

  4. HashMap相关总结

    1.HashMap:根据键值hashCode值存储数据,大多数情况下可以直接定位到它的值,但是遍历顺序不确定.所有哈希值相同的值存储到同一个链表中                         Ha ...

  5. 第一次Sprint冲刺结果评价

    组名 软件项目名称 评价 hzsy 图文转换        这款软件最初的目标是扫描书本上文字转换成电子版,而且也可以将语音转换成文字,但在展示时,没有实现完整的功能,只有简单的界面,看不到更深的实质 ...

  6. Java 笔记——MyBatis 生命周期

    1.MyBatis 的生命周期 MyBatis的核心组件分为4个部分. SqlSessionFactoryBuilder (构造器): 它会根据配置或者代码来生成SqISessionFactory,采 ...

  7. PAT 1062 最简分数

    https://pintia.cn/problem-sets/994805260223102976/problems/994805268334886912 一个分数一般写成两个整数相除的形式:/,其中 ...

  8. MYSQL 解决中文字符集乱码问题的方法

    修改 /etc/mysql/my.cnf 增加内容 [client] default-character-set = utf8mb4 [mysql] default-character-set = u ...

  9. CentOS 下运行Docker 内执行 docker build 命令的简单方法

    1. 通过部分文档进行学习...主要知识来源 https://blog.csdn.net/shida_csdn/article/details/79812817 2. 下载 docker 的rpm包. ...

  10. PSP（4.6——4.12）以及周记录

    1.PSP 4.6 8:30 10:30 20 100 博客 B Y min 12:00 13:00 5 55 Account A Y min 13:05 13:15 0 10 站立会议 A Y mi ...