<!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. CDH 5.16.1 离线部署 & 通过 CDH 部署 Hadoop 服务

    参考 Cloudera Enterprise 5.16.x Installing Cloudera Manager, CDH, and Managed Services Installation Pa ...

  2. Leetcode(力扣) 整数反转

    Leetcode 7.整数反转 给出一个 32 位的有符号整数,你需要将这个整数中每位上的数字进行反转. 示例: 输入: -123 输出: -321 注意: 假设我们的环境只能存储得下 32 位的有符 ...

  3. unity上传app store遇到的一些问题

    记录ios发布时遇到的一些问题 注:如果你是用mac开发,那就在Unity里直接BuildAndRun就直接可以导到XCode里,如果是win,那就先打包成ios包,在传导Xcode里打开,不过可能会 ...

  4. 微软职位内部推荐-SW Engineer II for WinCE

    微软近期Open的职位: Do you have a passion for embedded devices and services? &nbsp Does the following m ...

  5. LeetCode 551. Student Attendance Record I (C++)

    题目: You are given a string representing an attendance record for a student. The record only contains ...

  6. java实验报告三

    实验三 敏捷开发与XP实践 一.实验内容 1. XP基础 2. XP核心实践 3. 相关工具 二.实验步骤 (一)敏捷开发与XP 软件工程是把系统的.有序的.可量化的方法应用到软件的开发.运营和维护上 ...

  7. 《TCP-IP详解卷1》中BGP部分的笔记

  8. Windows 7 上面安装 dotnet core 之后 使用 应用报错的处理：api-ms-win-crt-runtime-l1-1-0.dll 丢失

    Windows2016 使用 dotnet core的使用 安装了就可以了 但是发现 windows 7 不太行 报错如图示 没办法简单百度了下 https://www.microsoft.com/z ...

  9. OneZero第四周第四次站立会议（2016.4.14）

    1. 时间: 15:00--15:10  共计10分钟. 2. 成员: X 夏一鸣 * 组长 (博客:http://www.cnblogs.com/xiaym896/), G 郭又铭 (博客:http ...

  10. nestd事务如果报错了 则回滚到外部事物保存点 且外部事物如果没异常的话 会正常提交 nested事务并不会提交；如果外部事物报错了 内部事务会一同回滚

    nestd事务如果报错了 则回滚到外部事物保存点 且外部事物如果没异常的话 会正常提交 nested事务并不会提交:如果外部事物报错了 内部事务会一同回滚