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. RILC

    RILC RIL层的作用大体上就是将上层的命令转换成相应的AT指令,控制modem工作.生产modem的厂家有很多:Qualcomm, STE, Infineon... 不同的厂家都有各自的特点,当然 ...

  2. 【翻译+整理】.NET Core的介绍

    .NET Core 是一个通用开发平台,它由微软和开源社区共同管理(git hub的.NET开源社区): 他支持Windows,macOS和Linux,并且可以运行在硬件设备中.云平台上和物联网嵌入式 ...

  3. 【转载】访问WEB-INF目录中的JSP文件

    转自:http://blog.csdn.net/eidolon8/article/details/7050114 方法1:本来WEB-INF中的jsp就是无法通过地址栏访问的.所以安全.如果说你要访问 ...

  4. Oracle / PLSQL函数 - NUMTODSINTERVAL和NUMTOYMINTERVAL

    最近在学习数据库方面的知识,做个标记. 这里有英文解释,建议多看看英文文档: https://www.techonthenet.com/oracle/functions/ 下面开始记录一下,自己在Or ...

  5. template template parameter

    #include <iostream> using namespace std; template<typename T> class A { }; template<t ...

  6. Docker集群实验环境布署--swarm【3 注册服务监控与自动发现组件--consul】

    参考官网集群配置方式 https://hub.docker.com/r/progrium/consul/   集群中需要manager与node能通信consul的发现服务,不然,管理节点选举不了,无 ...

  7. 【C#】Deep copy of objects

    If you learned C++ carefully, you must have known something about the copy of object. For example, I ...

  8. Netty 5.0源码分析之综述

    1. 前言 本系列主要是用于梳理Netty的架构流程,深入设计细节,重点关注Netty是如何实现它所声称的特性. (ps:本人水平有限,如有错误,请不吝指教 : )) 2. 什么是Netty Nett ...

  9. centos 安装apache activemq

    安装说明 安装环境:CentOS-6.3 安装方式:源码安装  软件:apache-tomcat-7.0.29.tar.gz下载地址http://activemq.apache.org/downloa ...

  10. C语言中的位运算的技巧

    一.位运算实例 1.用一个表达式,判断一个数X是否是2的N次方(2,4,8,16.....),不可用循环语句. X:2,4,8,16转化成二进制是10,100,1000,10000.如果减1则变成01 ...