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. C++ C++ 控制台程序 设置图标

    . 实现过程 创建1个控制台程序. 新建1个 Resource Script文件 #include "stdio.h" #include <windows.h> #in ...

  2. S5PV210开发系列四_uCGUI的移植

    S5PV210开发系列四 uCGUI的移植 象棋小子          1048272975 GUI(图形用户界面)极大地方便了非专业用户的使用,用户无需记忆大量的命令,取而代之的是能够通过窗体.菜单 ...

  3. JUnit---Java单元测试必备工具

      在我们每天业务代码都写不完,为什么还要写测试代码呢,项目完成之后我再测不行吗? 看起来像是增加了代码量,但是它恰恰帮你减少了后期测试排错的时间,每个team,每个人都是有Bug指标的,首先,每次你 ...

  4. java后端模拟表单提交

    代码可实现文本域及非文本域的处理 请求代码: /** * 上传 * * @param urlStr * @param textMap * @param fileMap * @return */ pub ...

  5. 新浪云(SAE)使用没有内置的django版本

    SAE自带的django目前到1.5版本,如果要使用更高的版本,则需要把django包同代码一起上传. 以1.7.3为例 先从SAE svn签出代码,默认1是根目录 1.  1目录下创建文件夹 sit ...

  6. OpenCV之邻域运算之最值滤波

    写了一段小程序,分享给大家! //==================================================================== // 作者 : quarry ...

  7. eclipse 的小技巧

    1. ctrl+o:快速outline 如果想要查看当前类的方法或某个特定方法,但又不想把代码拉上拉下,也不想使用查找功能的话,就用ctrl+o吧.它可以列出当前类中的所有方法及属性,你只需输入你想要 ...

  8. Java中数组的快排

    描述输入三个字符(可以重复)后,按各字符的ASCII码从小到大的顺序输出这三个字符.   输入 第一行输入一个数N,表示有N组测试数据.后面的N行输入多组数据,每组输入数据都是占一行,有三个字符组成, ...

  9. cocos2d-x3.x使用rapidjson

    rapidjson效率高,所以之前cocostudio里面解析用的jsoncpp也换成了rapidjson. 引擎又带有rapidjson库,所以不用单独去下载,直接就可以用. 这里主要写一下关于解析 ...

  10. Emacs 安装 jedi

    Jedi 是个很棒的 python 的自动补全插件,可以显示 docstring, function arguments and code location. 安装步骤: 一.安装 python 的虚 ...