CSS3 笔记一(Rounded Corners/Border Images/Backgrounds)
CSS3 Rounded Corners
- The border-radius property is a shorthand property for setting the four border-*-radius properties.
syntax
border-radius: 1-4 length|% / 1-4 length|%|initial|inherit;
Property | Description |
---|---|
border-radius | A shorthand property for setting all the four border-*-*-radius properties |
border-top-left-radius | Defines the shape of the border of the top-left corner |
border-top-right-radius | Defines the shape of the border of the top-right corner |
border-bottom-right-radius | Defines the shape of the border of the bottom-right corner |
border-bottom-left-radius | Defines the shape of the border of the bottom-left corner |
Example
#rcorners7 {
border-radius: 50px; background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
} #rcorners8 {
border-radius: 15px/50px; /* elliptical corners */
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
} #rcorners9 {
border-radius: 50%;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
CSS3 Border Images
1> border-image
- The border-image property is a shorthand property.
syntax
border-image: source slice width outset repeat|initial|inherit;
2> border-image-source
- The border-image-source property specifies the path to the image to be used as a border
border-image-source: none|image|initial|inherit;
3> border-image-slice
- The border-image-slice property specifies how to slice the image.
- The image is always sliced into nine sections: four corners, four edges and the middle.(九宫格)
- The number(s) represent pixels for raster images or coordinates for vector images.(纯数字不需单位)
border-image-slice: number|%|fill|initial|inherit;
4> border-image-width
- The border-image-width property specifies the width of the border image.
syntax
border-image-width: number|%|auto|initial|inherit;
5> border-image-outset
- The border-image-outset property specifies the amount by which the border image area extends beyond the border box.
syntax
border-image-outset: length|number|initial|inherit;
6> border-image-repeat
- The border-image-repeat property specifies whether the border image should be repeated, rounded or stretched.
syntax
border-image-repeat: stretch|repeat|round|initial|inherit;
Value | Description | |
---|---|---|
stretch | Default value. The image is stretched to fill the area | |
repeat | The image is tiled (repeated) to fill the area | |
round | The image is tiled (repeated) to fill the area. If it does not fill the area with a whole number of tiles, the image is rescaled so it fits | |
space | The image is tiled (repeated) to fill the area. If it does not fill the area with a whole number of tiles, the extra space is distributed around the tiles | |
initial | Sets this property to its default value. | |
inherit | Inherits this property from its parent element. |
CSS3 Backgrounds
1> background
- CSS3 allows you to add multiple background images for an element.
- The different background images are separated by commas, and the images are stacked on top of each other, where the first image is closest to the viewer.
syntax
background: color image position/size repeat origin clip attachment initial|inherit;
2> background-clip
- The background-clip property specifies the painting area of the background.
syntax
background-clip: border-box|padding-box|content-box|initial|inherit;
Value | Description |
---|---|
border-box | Default value. The background is clipped to the border box |
padding-box | The background is clipped to the padding box |
content-box | The background is clipped to the content box |
initial | Sets this property to its default value. |
inherit | Inherits this property from its parent element. |
3> background-origin
- The background-origin property specifies where the background image is positioned.
syntax
background-origin: padding-box|border-box|content-box|initial|inherit;
Value | Description |
---|---|
padding-box | Default value. The background image starts from the upper left corner of the padding edge |
border-box | The background image starts from the upper left corner of the border |
content-box | The background image starts from the upper left corner of the content |
initial | Sets this property to its default value. |
inherit | Inherits this property from its parent element. |
Difference between background-clip and background-origin
- The background-clip CSS property specifies whether an element's background, either the color or image, extends underneath its border.
- The background-origin CSS property determines the background positioning area, that is the position of the origin of an image specified using the background-image CSS property.
4> background-size
- The background-size property specifies the size of the background images.
background-size: auto|length|cover|contain|initial|inherit;
Value | Description |
---|---|
auto | Default value. The background-image contains its width and height |
length |
Sets the width and height of the background image. The first value sets the width, the second value sets the height. If only one value is given, the second is set to "auto" |
percentage |
Sets the width and height of the background image in percent of the parent element. The first value sets the width, the second value sets the height. If only one value is given, the second is set to "auto". |
cover | Scale the background image to be as large as possible so that the background area is completely covered by the background image. Some parts of the background image may not be in view within the background positioning area |
contain | Scale the image to the largest size such that both its width and its height can fit inside the content area |
initial | Sets this property to its default value. |
inherit | Inherits this property from its parent element. |
CSS3 笔记一(Rounded Corners/Border Images/Backgrounds)的更多相关文章
- 【CSS3】Advanced1:Rounded Corners
1.Border radius The border-radius property can be used to working clockwise from top-left set border ...
- CSS3笔记
CSS/CSS3在线手册:http://www.css119.com/book/css/ CSS3实现水平垂直居中:http://bbs.html5cn.org/thread-87300-1-1. ...
- css3动画使用技巧之—border旋转时的应用。
<html> <head> <title>css3动画border旋转时的应用.</title> <meta charset="UTF- ...
- CSS3笔记(一)
最开始的时候 CSS3产生的一个新属性是一个浏览器的私有的,然后W3C 可能会拿来采用做个标准,再没公布标准之前就只能用私有属性(加前缀)来表达各自厂商的实现,主要是CSS3刚出现那会儿,它暗示该CS ...
- CSS3笔记之第四天
CSS3 2D 转换 了解2D变换方法: translate() rotate() scale() skew() matrix() translate()方法,根据左(X轴)和顶部(Y轴)位置给定的参 ...
- CSS3笔记之第一天
通过展示实例来初步学习CSS3 1.背景 设置背景色:background-color:#b0c4de; 设置背景图片:background-image:url('paper.gif'); 设置背景图 ...
- CSS3笔记4
1.CSS3盒子模型 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...
- 前端CSS3笔记
第1章CSS3简介 如同人类的的进化一样,CSS3是CSS2的“进化”版本,在CSS2基础上,增强或新增了许多特性, 弥补了CSS2的众多不足之处,使得Web开发变得更为高效和便捷. 1.1 CS ...
- CSS3笔记-加强版
属性选择器: E[attr]只使用属性名,但没有确定任何属性值 E[attr="value"]指定属性名,并指定了该属性的属性值 E[attr~="value&quo ...
随机推荐
- Sqoop_mysql,hive,hdfs导入导出操作
前言: 搭建环境,这里使用cdh版hadoop+hive+sqoop+mysql 下载 hadoop-2.5.0-cdh5.3.6.tar.gz hive-0.13.1-cdh5.3.6.tar.gz ...
- 关于android端的json传输
比较通用的传输方法 import java.util.ArrayList; import java.util.List; import org.apache.http.HttpEntity; impo ...
- 导入excle数据将excle数据插入到数据库
实现功能是,用户可以直接导入对应数据,或者用户下载模板,填写数据,导入模板数据.easyui实现 前台页面 { text : '日清导入', iconCls : 'icon-print', handl ...
- SPFA导读及介绍(转载)
适用范围:给定的图存在负权边,这时类似Dijkstra等算法便没有了用武之地,而Bellman-Ford算法的复杂度又过高,SPFA算法便派上用场了. 我们约定有向加权图G不存在负权回路,即最短路径一 ...
- matlab练习程序(SUSAN检测)
matlab练习程序(SUSAN检测) SUSAN算子既可以检测角点也可以检测边缘,不过角点似乎比不过harris,边缘似乎比不过Canny.不过思想还是有点意思的. 主要思想就是:首先做一个和原图像 ...
- (三)CMS Collector
有些资料中,为区别parallel collector ,将应用与gc并发成为并行,在接下来的文章中,仍称为并发. -XX:useConcMarkSweepGC,可以用于minor gc和major ...
- Codeforces Round #378 (Div. 2) C D
在实验室通宵 一边做水题一边准备随时躲起来以免被门卫大爷巡查发现..结果居然没来.. 本来以为可以加几分变个颜色..结果挂了CD...状态有点差...思维不太活跃 沉迷暴力不能自拔 D 给出n个长方体 ...
- Unity3D 开发 之 JDK安装与环境变量配置
安装JDK 选择安装目录 安装过程中会出现两次 安装提示 .第一次是安装 jdk ,第二次是安装 jre .建议两个都安装在同一个java文件夹中的不同文件夹中.(不能都安装在java文件夹的根目录 ...
- 我的web框架设计
做了很久的web开发,学了webform和mvc自己总结了,觉得当下的构架还是有改进的可能的. 其实首先说下我的一些认识(个人认知,欢迎讨论,谢绝砸砖). 我觉得对计算机和数据的操作,本身就是一个单向 ...
- NEC学习 ---- 布局 -三列,左侧自适应
效果图: html代码: <div id="demo4"> <div class="g-bd4 f-cb"> <div class ...