1.圆角边框（div的一个属性：border-radius）

　　

<!DOCTYPE html>

<html>

<head>

<style>

div

{

　　text-align:center;

　　border:2px solid #a1a1a1;

　　padding:10px 40px;

　　background:#dddddd;

　　width:350px;

　　border-radius:25px;

}

</style>

</head>

<body>

<div>有圆角的div</div>

</body>

</html>

　　效果图：

2.边框阴影（box-shadow）

<!DOCTYPE html>

<html>

<head>

<style>

div

{

    width:300px;

    height:100px;

    background-color:blue;

    box-shadow: 15px 15px 30px red;

}

</style>

</head>

<body>

    <div></div>

</body>

</html>

　　效果图：

　　

　

box-shadow：

　　　　水平阴影、垂直阴影、模糊距离，以及阴影的颜色

　　　 第一个参数--水平阴影，向右移动距离
　　　 第二个参数--垂直阴影，向下移动距离
　　　 第三个参数--模糊距离，把阴影拉远、变模糊
　　　 第四个参数--阴影颜色

css3学习01的更多相关文章

  1. 【iScroll源码学习01】准备阶段 - 叶小钗

    [iScroll源码学习01]准备阶段 - 叶小钗 时间 2013-12-29 18:41:00 博客园-原创精华区 原文  http://www.cnblogs.com/yexiaochai/p/3 ...

  2. Python学习--01入门

    Python学习--01入门 Python是一种解释型.面向对象.动态数据类型的高级程序设计语言.和PHP一样,它是后端开发语言. 如果有C语言.PHP语言.JAVA语言等其中一种语言的基础,学习Py ...

  3. HTML5 CSS3学习

    HTML5 CSS3学习 :http://www.1000zhu.com/course/css3/ HTML5 相关书籍:   http://www.html5cn.com.cn/news/gdt/2 ...

  4. Java虚拟机JVM学习01 流程概述

    Java虚拟机JVM学习01 流程概述 Java虚拟机与程序的生命周期 一个运行时的Java虚拟机(JVM)负责运行一个Java程序. 当启动一个Java程序时,一个虚拟机实例诞生:当程序关闭退出,这 ...

  5. Android Testing学习01 介绍 测试测什么 测试的类型

    Android Testing学习01 介绍 测试测什么 测试的类型 Android 测试 测什么 1.Activity的生命周期事件 应该测试Activity的生命周期事件处理. 如果你的Activ ...

  6. CSS3学习之圆角box-shadow,阴影border-radius

    最近经常玩腾讯微博,出来职业习惯,看看它的CSS,里面运用了大量的css3的东东,有一处用到了Data URI,还有css e­xpression有争议的地方,对png24图片的处理也是用滤镜,类似( ...

  7. Java学习01

    Java学习01 第一章 1.JRE与JDK JDK(JAVA Develop Kit,JAVA开发工具包)提供了Java的开发环境和运行环境,主要用于开发JAVA程序,面向Java程序的开发者; J ...

  8. ThinkPhp学习01

    原文:ThinkPhp学习01 一.ThinkPHP的介绍           MVC  M - Model 模型                工作:负责数据的操作  V - View  视图(模板 ...

  9. css和css3学习

    css和css3学习 css布局理解 css颜色大全 样式的层叠和继承 css ::before和::after伪元素的用法 中文字体font-family常用列表 cursor属性 css选择器 F ...

随机推荐

  1. JIT动态编译器的原理与实现之Interpreter3

    JIT动态编译器的原理与实现之Interpreter(解释器)的实现(三) 接下来,就是要实现一个虚拟机了.记得编码高质量的代码中有一条:不要过早地优化你的代码.所以,也本着循序渐进的原则,我将从实现 ...

  2. linux 高精度定时器例子

    //author:DriverMonkey //phone:13410905075 //mail:bookworepeng@Hotmail.com //qq:196568501 #include &l ...

  3. 数据库(MySQL)表基本操作

                                    数据库表基本操作 思前想后,最终还是把博客的名字改成了数据库表基本操作,以前叫SQL语句大全,感觉用"大全"这个名词 ...

  4. maven自定义骨架

    Maven 的 archetype 技术,为新建标准化的工程框架提供了方便.为自定义一套工程框架标准,可参考以下步骤操作: 1,创建一个项目的原型 2,在项目根目录执行命令:mvn archetype ...

  5. （三）Python在windows上安装

    1.安装2.7--进入python官网(网址百度)下载python2.7 和python3.6(很小,2个程序后缀不一样?)2.安装到c:\python----next----advanced不动-- ...

  6. 访问mysql出现“Access denied for user root@localhost”（using password：NO）解决方案

    首先声明,出现这个提示的原因有很多,以下只针对我遇到的一种情况 使用解压缩版安装mysql的时候,data文件夹是自己新建的,my-default.ini也是自己配置的,这时直接启动mysql服务的时 ...

  7. 【CSS学习笔记】字体的控制

    关于font-family: "无衬线体"(Sans-serif),比如黑体,微软雅黑 "有衬线体"(Serif),比如宋体,新宋 程序员设置的字体,客户电脑上 ...

  8. php bin/console doctrine:migrations:migrate

    $ php bin/console doctrine:migrations:migrate                    XinXiBundleMigrationsWARNING! You a ...

  9. ViewCompat.animate(view) floatEval.evaluate() argbEval.evaluate()

    ViewCompat.animate(ivHead) .translationX(60)// .setInterpolator(new CycleInterpolator(4))//循环执行// .s ...

  10. hadoop端口配置指南

    获取默认配置 配置hadoop,主要是配置core-site.xml,hdfs-site.xml,mapred-site.xml三个配置文件,默认下来,这些配置文件都是空的,所以很难知道这些配置文件有 ...