CSS3 圆角

border-radius

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html>
<head>
<style> 
#t1
{
border:2px solid #a1a1a1;
padding:10px 40px; 
background:#dddddd;
width:300px;
border-radius:25px;
}
</style>
</head>
<body>
 
<div id="t1">border-radius 属性允许您为元素添加圆角边框！ </div>
 
</body>
</html>

CSS3盒阴影

box-shadow

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html>
<head>
<style> 
div
{
width:300px;
height:100px;
background-color:yellow;
box-shadow: 10px 10px 5px #888888;
}
</style>
</head>
<body>
 
<div></div>
 
</body>
</html>

CSS3边界图片

border-image

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<!DOCTYPE html>
<html>
<head>
<style> 
div
{
border:15px solid transparent;
width:250px;
padding:10px 20px;
}
 
#round
{
border-image:url(border.png) 30 30 round;
}
 
#stretch
{
border-image:url(border.png) 30 30 stretch;
}
</style>
</head>
<body>
 
 
<p> border-image 属性用于设置图片的边框。</p>
 
<div id="round">这里，图像平铺（重复）来填充该区域。</div>
<br>
<div id="stretch">这里，图像被拉伸以填充该区域。</div>
 
<p>这是我们使用的图片素材：</p>
<img src="/images/border.png" />
 
</body>
</html>

新边框属性

属性 说明 CSS
border-image 设置所有边框图像的速记属性。 3
border-radius 一个用于设置所有四个边框- *-半径属性的速记属性 3
box-shadow 附加一个或多个下拉框的阴影 3

css3学习笔记之边框的更多相关文章

  1. CSS3学习笔记(3)-CSS3边框

    p{ font-size: 15px; } .alexrootdiv>div{ background: #eeeeee; border: 1px solid #aaa; width: 99%; ...

  2. CSS3学习笔记之linear-gradient

    我觉得CSS3很不错,自己也稍微看过,并且尝试过一些属性.对我自己而言,我没有勇气说我学过CSS3,我觉得任何自己看来很小的事情,也只是站在自己的角度来评判.就算的是"简单的"HT ...

  3. [CSS3] 学习笔记-背景与边框相关样式

    1.与背景相关的新增属性 包括:backgroud-clip,backgroud-origin,backgroud-size <!DOCTYPE html> <html> &l ...

  4. CSS3 学习笔记(边框 背景 字体 图片 旋转等)

    边框 盒子圆角 border-radius:5px / 20%: border-radius:5px 4px 3px 2px; 左上,右上,右下,左下 盒子阴影 box-shadow:box-shad ...

  5. CSS3学习笔记1-选择器和新增属性

    前言:之前自学了一些关于CSS3的知识,在学习过程中也遇到过坑,不过总算磕磕绊绊的学习完了关于CSS3的相关知识,于是最近把之前的笔记和代码整理了一下,也算是一个对CSS3知识的回顾复习吧,也希望能够 ...

  6. 十天精通CSS3学习笔记 part4

    CSS3中的变形与动画(下) CSS3 Keyframes介绍 Keyframes 被称为关键帧,其类似于Flash中的关键帧.在CSS3中其主要以"@keyframes"开头,后 ...

  7. 我的CSS3学习笔记

    1.元字符使用: []: 全部可选项 ||:并列 |:多选一 ?: 0个或者一个 *:0个或者多个 {}: 范围 2.CSS3属性选择器: E[attr]:存在attr属性即可: E[attr=val ...

  8. 十天精通CSS3学习笔记 part2

    第6章 征服CSS3选择器(上) 属性选择器 在HTML中,通过各种各样的属性可以给元素增加很多附加的信息.例如,通过id属性可以将不同div元素进行区分. 在CSS2中引入了一些属性选择器,而CSS ...

  9. 十天精通CSS3学习笔记 part1

    http://www.imooc.com/learn/33 第1章 初识CSS3 什么是CSS3? CSS3是CSS2的升级版本,3只是版本号,它在CSS2.1的基础上增加了很多强大的新功能. 目前主 ...

随机推荐

  1. 根据条件自定义 cxGrid 的单元格样式

    当指定的单元格需要指定样式(如字体颜色设置为红色,背景色设置为黄色)时,可按如下步骤进行: 1.添加 csStyleRepository 控件,并新建 Style,设置前景(TextColor).背景 ...

  2. Codeforces Gym 100637A A. Nano alarm-clocks 前缀和

    A. Nano alarm-clocks Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/gym/100637/p ...

  3. Nginx 1.4.7图片缓存服务器

    软件包版本: Nginx 1.4.7 Ngx_cache_purge-2.0 Openssl-1.0.1 Pcre-8.32 二.安装编译: a)         下载pcre-8.32.tar.gz ...

  4. Hbase深入学习(六) Java操作HBase

    Hbase深入学习(六) ―― Java操作HBase 本文讲述如何用hbase shell命令和hbase java api对hbase服务器进行操作. 先看以下读取一行记录hbase是如何进行工作 ...

  5. 【ZZ】如何选择适合自己项目的编程语言

    http://news.cnblogs.com/n/506473/ 与操作系统一样,在办公室软件套装和计算机中也具有各种计算机语言.存在这种多样性的原因与其它地方的多样性一样—-因为没有单一的解决方法 ...

  6. SSH Spring3\Java1.8 “Unable to instantiate Action, xxAction, defined for 'xxAction_login' in namespace '/'null”

    1.Stacktraces Unable to instantiate Action,xxAction, defined for 'xxAction_login' in namespace '/'nu ...

  7. 刚安装完jdk和eclipse需要配置什么？

    还需要配置环境变量,你还要下载 apache-tomcat WEB服务器,也就是说 系统能找到你的 服务器,具体配置:(在windows桌面上右击“我的电脑” —> “属性” —> “高级 ...

  8. Index Generation

    Index Generation Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 230   Accepted: 89 Des ...

  9. How to Diagnose Audi Vehicles via Tuirel S777

    Here share how to diagnose Audi cars via Tuirel S777. 1.Well connect Tuirel S777 to your Audi car, a ...

  10. android开发之路08（ListView&Adapter）

    ListView控件介绍:用于将数据库中的数据或者网络中的数据通过列表的形式显示出来:ListView采用MVC模式将前端显示和后端数据进行分离. 也就是说,ListView控件在装载数据时并不是直接 ...