<!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. jenkins +gitlab +docker 自动化部署tomcat 项目

    实验环境 实验设备 三台服务器 centos 7.X 以上 内存 2-3G左右 192.168.1.195 (jenkins最新+ git 2.8+maven 3.5 +tomcat 8+java1. ...

  2. DRF框架获取参数的方式

    DRF获取参数的方式 例如url url(r'^demo/(?P<word>.*)/$', DemoView.as_view()) 在类视图中获取参数 url:http://127.0.0 ...

  3. 【Alpha】第四次Scrum meeting

    今天任务一览: 姓名 今日完成任务 所耗时间 刘乾 配置好了所有物理实验的通配模板,为服务器配置了latex中文环境,设置了一些常用字体. Issue链接:https://github.com/bua ...

  4. Linux内核分析——第六周学习笔记20135308

    第六周 进程的描述和进程的创建 一.进程描述符task_struct数据结构 1.操作系统三大功能 进程管理 内存管理 文件系统 2.进程控制块PCB——task_struct 也叫进程描述符,为了管 ...

  5. centos 64位 下hadoop-2.7.2 下编译

    centos 64位 下hadoop-2.7.2 下编译 由于机器安装的是centos 6.7 64位 系统  从hadoop中下载是32位  hadoop 依赖的的库是libhadoop.so 是3 ...

  6. jqgrid查找

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletExcepti ...

  7. bing背单词交互流程 - Chongyang Bai

    昨天和travis,钟秋开会确认了bing背单词的手机界面交互流程.我在这里简单描述一下,设计页面暂时不能贴出来,期待大家的宝贵意见 b(￣▽￣)d. 单词本浏览界面:单词本被分为两类,用户单词本和单 ...

  8. [转帖] Linux运维基础知识学习内容

    原作者地址:https://www.cnblogs.com/chenshoubiao/p/4793487.html 最近在学习 linux  对简单的命令有所掌握 但是 复杂的脚本 shell pyt ...

  9. Jira 的 数据库备份恢复 简单过程

    1 发现jira的备份恢复很简单, 只需要导入导出一个zip包即可 导出 选择系统 管理员入口登录 选择导入导出 进行备份系统数据 选择一个文件名就能备份 备份结果 将文件copy到上一一级目录的 i ...

  10. code first 如何创建索引字段

    比较简单的办法: protected override void Seed(Context context) { CreateIndex(context, "ProductName" ...