<!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. 软件测试_APP测试_兼容性测试

    APP的兼容测试主要就是测试APP的安装.启动.运行.卸载测试,以及安装时间 .启动时间.CPU占用.内存占用.流量耗用.电量耗用等性能上的测试. 兼容性测试点: 一.内部兼容性: 1.与本地和其他主 ...

  2. Outlook2013修改数据文件默认存放目录

    转载 当使用outlook 2013新建Email账户的时候,其数据文件(.ost文件)总是被保存在C盘默认目录“C:\Users\用户名\AppData\Local\Microsoft\Outloo ...

  3. pycharm常用的一些快捷键

    1.编辑(Editing) Ctrl + Space 基本的代码完成(类.方法.属性)Ctrl + Alt + Space 快速导入任意类Ctrl + Shift + Enter 语句完成Ctrl + ...

  4. sqlserver-表分区

    最近对公司数据库性能方面改造.现已初建成效. 公司原先数据库问题颇多,简单列举下: 1.数据表文档缺失. 2.数据库900多张表,接近一半都是备份和一些报表,没有分库处理 3.大数量的表按照年份人工导 ...

  5. 对Java8 stream的简单实践

    最近学习很多Java8方面的新特性,特地做了一些简单的实践和总结. import java.util.*; import java.util.stream.Collectors; public cla ...

  6. 【MOOC EXP】Linux内核分析实验一报告

    程涵  原创博客 <Linux内核分析>MOOC课程http://mooc.study.163.com/course/USTC-1000029000  [反汇编一个简单的C程序]   实验 ...

  7. 20135234mqy-——信息安全系统设计基础第十二周学习总结

    process environ.c environvar.c consumer.c 管道写端 producer.c 管道读端 testmf.c listargs.c pipedemo.c 管道 pip ...

  8. C/C+ 感触

    1.       C/C++语言开发的首选利器- C++Test       以前在windows平台下的开发,使用的框架主要是MFC,以及console工程(基于win32SDK),属于纯C/C++ ...

  9. final发布评论Ⅱ

    奋斗吧兄弟:奋斗吧兄弟团队提供了草原.水域.田地三种环境可以进行选择.功能如下:添加自定义生物功能可以增加生物种类,但是无法设置捕食关系,这里希望想办法完善.生物除了图片方式以外,还可以以文字的方式展 ...

  10. 【bzoj5118】Fib数列2 费马小定理+矩阵乘法

    题目描述 Fib定义为Fib(0)=0,Fib(1)=1,对于n≥2,Fib(n)=Fib(n-1)+Fib(n-2) 现给出N,求Fib(2^n). 输入 本题有多组数据.第一行一个整数T,表示数据 ...