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. python的一些总结2

    第一篇 写了下 基本的环境搭建和一个hello world 程序 下面 介绍接下 怎么使用 python 搭建一个网站.(中间的语法教学 请参考->http://www.liaoxuefeng. ...

  2. zookeeper的C#Client

    最近在搭一套soa,  服务使用java/scala 的finagle 协议使用thrift 然后 finagle默认服务端会是使用zookeeper作为节点存储.. 所以想要访问具体服务,需要先通过 ...

  3. quartz 2.2.1 jdbc 连接池参数配置

    /** The JDBC database driver. */指定连接驱动 public static final String DB_DRIVER = "driver"; /* ...

  4. mac 环境下mysql 不能删除schema问题的解决办法

    首先说明下问题环境,我是在mac机器上安装的mysql+workbench. 在删除一个数据库的时候,出现error dropping database cant rmdir ./test 的问题. ...

  5. delphi array应用 DayOfWeek星期几判断

    //array应用 DayOfWeek星期几判断 procedure TForm1.Button1Click(Sender: TObject);var    days:array[1..7] of s ...

  6. 行规——::GetDC()和::ReleaseDC()配对

    1.今天向客户演示程序,不巧崩溃了.最后发现是使用了GetDC()后没有使用ReleaseDC()引起的. 2.最早听说GetDC()和ReleaseDC()是从前任带头码哥那里听说的,那时候仅仅用& ...

  7. xtrabackup原理2

    XTRABACKUP备份原理实现细节——对淘宝数据库内核月报补充 前言 淘宝3月的数据库内核月报对xtrabackup的备份原理做了深入的分析,写的还是很不错.不过Inside君在看完之后,感觉没有对 ...

  8. 文本编辑器Nano实用快捷键

    一.复制.剪切和粘贴文本 1.行复制.剪切和粘贴 Alt+6:复制光标所在行. Ctrl+K:剪切光标所在行. Ctrl+U:粘贴. 2.自由复制.剪切和粘贴 自由复制: Ctrl+6:设置复制文本的 ...

  9. POJ 2498 Martian Mining

    Martian Mining Time Limit: 5000MS   Memory Limit: 65536K Total Submissions: 2194   Accepted: 1326 De ...

  10. 01 MySQL锁概述

    锁是计算机协调多个进程或线程并发访问某一资源的机制.在数据库中,除传统的计算资源(如CPU.RAM.I/O 等)的争用以外,数据也是一种供许多用户共享的资源.如何保证数据并发访问的一致性.有效性是所有 ...