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. Windows下载Android源代码

    下载msysgit,安装 官方下载:http://code.google.com/p/msysgit/downloads/list, 打开Git Bash,运行命令 cd D: git clone h ...

  2. mysql online ddl2

          大家知道,互联网业务是典型的OLTP(online transaction process)应用,这种应用访问数据库的特点是大量的短事务高并发运行.因此任何限制高并发的动作都是不可接受的, ...

  3. unix fopen和fopen_s用法的比较

    在定义FILE * fp 之后,fopen的用法是: fp = fopen(filename,"w").而对于fopen_s来说,还得定义另外一个变量errno_t err,然后e ...

  4. Java_spring_定时执行任务

    > 版本说明 <dependencies> <dependency> <groupId>org.springframework</groupId> ...

  5. 中兴电信光纤猫F612管理员密码获取方法

    1.telnet 192.168.1.1 账号:root 密码:Zte521 2.输入命令: sendcmd 1 DB p DevAuthInfo 得到管理员账号密码如下: <DM name=& ...

  6. iOS银行卡合法性校验

    项目中用到了校验银行卡,就拿来贴上来了 + (BOOL)checkCardNo:(NSString*)cardNo;//判断银行卡 + (BOOL)checkCardNo:(NSString*)car ...

  7. [改善Java代码]预防线程死锁

    线程死锁DeadLock是多线程编码中最头疼的问题,也是最难重现的问题,因为Java是单进程多线程语言.

  8. mdeditor

    *在线地址:* http://ghosertblog.github.io/mdeditor/ # Markdown 语法简明手册 ### 1. 使用 * 和 ** 表示斜体和粗体 示例: 这是 *斜体 ...

  9. javascript-函数进阶

    一.函数定义 1.函数声明 function add(i,j){ return i+j; } 特点:1.函数声明定义函数会被前置.要知道在js代码执行时,会有一个预解析,预解析时会把变量声明.函数声明 ...

  10. 一步步搭建自己的轻量级MVCphp框架-（一）什么是PHP框架以及MVC设计模式

    PHP框架 php框架对很多新手而言可能会觉得很难攀越,其实不然 ,只要知道一个框架的流程,明白原理了,基本类似框架都可以看懂,php框架真正的发展要从php5开始了,其实php4时代就有一些框架,但 ...