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;

相关博文解析

> 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.

background-size Demos

CSS3 笔记一(Rounded Corners/Border Images/Backgrounds)的更多相关文章

  1. 【CSS3】Advanced1:Rounded Corners

    1.Border radius The border-radius property can be used to working clockwise from top-left set border ...

  2. CSS3笔记

    CSS/CSS3在线手册:http://www.css119.com/book/css/   CSS3实现水平垂直居中:http://bbs.html5cn.org/thread-87300-1-1. ...

  3. css3动画使用技巧之—border旋转时的应用。

    <html> <head> <title>css3动画border旋转时的应用.</title> <meta charset="UTF- ...

  4. CSS3笔记(一)

    最开始的时候 CSS3产生的一个新属性是一个浏览器的私有的,然后W3C 可能会拿来采用做个标准,再没公布标准之前就只能用私有属性(加前缀)来表达各自厂商的实现,主要是CSS3刚出现那会儿,它暗示该CS ...

  5. CSS3笔记之第四天

    CSS3 2D 转换 了解2D变换方法: translate() rotate() scale() skew() matrix() translate()方法,根据左(X轴)和顶部(Y轴)位置给定的参 ...

  6. CSS3笔记之第一天

    通过展示实例来初步学习CSS3 1.背景 设置背景色:background-color:#b0c4de; 设置背景图片:background-image:url('paper.gif'); 设置背景图 ...

  7. CSS3笔记4

    1.CSS3盒子模型 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...

  8. 前端CSS3笔记

    第1章CSS3简介 如同人类的的进化一样,CSS3是CSS2的“进化”版本,在CSS2基础上,增强或新增了许多特性, 弥补了CSS2的众多不足之处,使得Web开发变得更为高效和便捷. 1.1   CS ...

  9. CSS3笔记-加强版

    属性选择器:   E[attr]只使用属性名,但没有确定任何属性值 E[attr="value"]指定属性名,并指定了该属性的属性值 E[attr~="value&quo ...

随机推荐

  1. 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 ...

  2. 关于android端的json传输

    比较通用的传输方法 import java.util.ArrayList; import java.util.List; import org.apache.http.HttpEntity; impo ...

  3. 导入excle数据将excle数据插入到数据库

    实现功能是,用户可以直接导入对应数据,或者用户下载模板,填写数据,导入模板数据.easyui实现 前台页面 { text : '日清导入', iconCls : 'icon-print', handl ...

  4. SPFA导读及介绍(转载)

    适用范围:给定的图存在负权边,这时类似Dijkstra等算法便没有了用武之地,而Bellman-Ford算法的复杂度又过高,SPFA算法便派上用场了. 我们约定有向加权图G不存在负权回路,即最短路径一 ...

  5. matlab练习程序(SUSAN检测)

    matlab练习程序(SUSAN检测) SUSAN算子既可以检测角点也可以检测边缘,不过角点似乎比不过harris,边缘似乎比不过Canny.不过思想还是有点意思的. 主要思想就是:首先做一个和原图像 ...

  6. (三)CMS Collector

    有些资料中,为区别parallel collector ,将应用与gc并发成为并行,在接下来的文章中,仍称为并发. -XX:useConcMarkSweepGC,可以用于minor gc和major ...

  7. Codeforces Round #378 (Div. 2) C D

    在实验室通宵 一边做水题一边准备随时躲起来以免被门卫大爷巡查发现..结果居然没来.. 本来以为可以加几分变个颜色..结果挂了CD...状态有点差...思维不太活跃 沉迷暴力不能自拔 D 给出n个长方体 ...

  8. Unity3D 开发 之 JDK安装与环境变量配置

     安装JDK 选择安装目录 安装过程中会出现两次 安装提示 .第一次是安装 jdk ,第二次是安装 jre .建议两个都安装在同一个java文件夹中的不同文件夹中.(不能都安装在java文件夹的根目录 ...

  9. 我的web框架设计

    做了很久的web开发,学了webform和mvc自己总结了,觉得当下的构架还是有改进的可能的. 其实首先说下我的一些认识(个人认知,欢迎讨论,谢绝砸砖). 我觉得对计算机和数据的操作,本身就是一个单向 ...

  10. NEC学习 ---- 布局 -三列,左侧自适应

    效果图: html代码: <div id="demo4"> <div class="g-bd4 f-cb"> <div class ...