css3 UI 修饰——回顾
1.box-shadow 属性向框添加一个或者多个阴影。
语法: box-shadow: h-shadow v-shadow blur spread color inset
h-shadow 必须,水平阴影的位置,允许负值。
v-shadow 必须,垂直阴影的位置,允许负值。
blur 可选 模糊距离。
spread 可选,阴影的尺寸。
color 可选,阴影的颜色。
inset 可选,将外部阴影(outset) 改为内容步阴影。
示例:
<style>
.shadow{width: 300px; height: 150px; margin: 0 auto;}
.shadow img{ box-shadow: 3px 3px 4px #000;}
</style>
<div class="shadow">
<img src="1.png">
</div>
结果:如图
示例:
<style>
.shadow{width: 300px; height: 150px; margin: 0 auto;
background: yellow; box-shadow: 4px 4px 3px #000 inset;}
</style>
<div class="shadow">
</div>
结果:如图
2.border-radius
元素添加圆角边框。
语法:border-radius: 1-4 length | % / 1-4 length | %;
注意:四个值的顺序为,左上角,右上角,右下角,左下角。
border-radius: 2em 1em 4em / 0.5em 3em;
等价于:
border-top-left-radius: 2em 0.5em;
border-top-right-radius: 1em 3em;
border-bottom-right-radius:4em 0.5em;
border-bottom-left-radius:1em 3em;
border-radius支持百分比值 %
示例:
<style>
.radius-test1 { width: 100px; height: 100px;
margin: 0 auto; border: 50px solid #cd0000;
border-radius: 50%; }
</style>
<div class="radius-test1"></div>
结果:如图
3.border-image
元素边框背景
用于设置属性:
border-image-source 用在边框的图片的路径
border-image-slice 图片边框向内偏移
border-image-width 图片边框的宽度
border-image-outset 边框图像区域超出边框的量
border-image-repeat 图像边框是否平铺(repeated)
铺满(rounded )或者拉伸(stretched)默认。
边框将border-image 分成了9部分: border-top-image,border-right-image
border-bottom-image , border-left-image, border-top-left-image
border-top-right-image, border-bottom-left-image,
border-bottom-right-image 位于四个正方向的没有展示效果,不会平铺...
示例:
<style>
.border_image{width:400px; height:100px;border:1em double orange;border-image:url(1.png) 27;}
</style>
<div class="border_image"></div>
结果:如图
示例:(平铺 round)
<style>
.border_image{width:400px; height:100px;border:1em double orange;border-image:url(1.png) 27 round;}
</style>
<div class="border_image"></div>
结果:如图
示例:(平铺 repeat)
<style>
.border_image{width:400px; height:100px;border:1em double orange;border-image:url(1.png) 27 repeat;}
</style>
<div class="border_image"></div>
结果:如图
4.gradient 渐变
分为linear-gradient(线性渐变) 和 radial-gradient (径向渐变)
linear-gradient
语法background: -webkit-linear-gradient( top,#ccc,#000);
参数: 共三个参数 第一个参数表示为线性渐变的方向,top是从上往下,
left 是从左到右 如果定义成left top,那就是从左上角到右下角。
第二个和第三个参数分别是起点颜色和终点颜色。
示例:
<style>
.gradient{width:300px; height: 180px;
background:-webkit-linear-gradient(left,
red 50px, yellow 200px);}
</style>
<div class="gradient"></div>
结果:如图
示例:可以填写角度
<style>
.gradient{width:300px; height: 180px;
background:-webkit-linear-gradient(45deg,
red 50px, yellow 200px);}
</style>
<div class="gradient"></div>
结果:如图
radial-gradient 径向渐变。
渐变的形状是ellipse(表示椭圆形) farthest-cormer(表示到最远的角落)
语法:radial-gradient(red, green, blue);
示例:
<style>
.gradient{width:300px; height: 180px;
background:-webkit-radial-gradient
(circle, red, yellow, green);}
</style>
<div class="gradient"></div>
结果:如图
示例:ellipse椭圆
<style>
.gradient{width:300px; height: 180px;
background:-webkit-radial-gradient(
ellipse, red, yellow, green);}
</style>
<div class="gradient"></div>
结果:如图
示例: 不同尺寸大小关键字的使用。
<style>
.gradient{width:300px; height:180px;background:
-webkit-radial-gradient(60% 55%, closest-
side,blue,green,yellow,black);}
</style>
<div class="gradient"></div>
结果:如图
重复的径向渐变
repeating-radial-gradient() 函数用于重复径向渐变
示例:
<style>
.gradient{width:300px; height: 180px;
background: -webkit-repeating-radial-
gradient(red, yellow 10%, green 15%);}
</style>
<div class="gradient"></div>
结果:如图
进度条小效果
<style>
.wrap{width:300px;height:25px;
overflow:hidden;border:1px
solid #000;}
.box{width:400px;height:30px;
background:-webkit-repeating-
linear- gradient(15deg,green 0,
green 10px,#fff 10px,#fff
20px); transition:3s;}
.wrap:hover .box{ margin-
left:-100px;}
</style>
<div class="wrap">
<div class="box"></div>
</div>
结果:如图
5.background-origin
规定background-position 属性相对于 什么位置来定位
语法:background-origin: padding-box|border-box|content-box;
padding-box 背景图像相对于内边距框来定位。
border-box 背景图像嫌贵对于
content-box 背景图像相对月内容框来定位
示例:
<style>
.background_origin{width: 300px;height: 150px;border:1px solid black;padding:35px;background-image:url('1.png');
background-repeat:no-repeat;background-position:left;background-origin:content-box;}
</style>
<div class="background_origin"></div>
结果:如图
6.background-clip
规定背景的绘制区域
值: border-box 背景被裁减到边框盒
padding-box 背景被裁剪到内边距框
content-box 背景被裁剪到内容框
no-clip:从border区域向外裁剪背景。
示例:
<style>
.background_clip{width:200px;height:50px;padding:50px;background-color:yellow;
background-clip:content-box;border:2px solid #92b901;}
</style>
<div class="background_clip"></div>
结果:如图
css3 UI 修饰——回顾的更多相关文章
- 【翻译】22款HTML & CSS3 UI工具包免费下载
下面盘点了22款适用于网页设计的HTML&CSS3 UI工具包,并且全部都是免费的哦!喜欢就赶紧 下载或收藏吧.这些免费工具可以加速你的网页开发进程,让你有更多时间专注于其他更重要的部分.由于 ...
- css3基础知识——回顾
1.属性选择器 完全匹配的属性选择器 [id=article]{} 示例: <style> input[type=text]{ border: 2px solid red;} </s ...
- UI渲染回顾简单笔记
UI渲染的简单过程: CPU,GPU,显示器协同工作,CPU 中计算显示内容,比如视图的创建.布局计算.图片解码.文本绘制等,然后将计算结果提交给GPU,由 GPU 进行变换.合成.渲染.随后 GPU ...
- CSS3新特性回顾
CSS3 介绍 开始实例 新特征简介 强大的CSS选择器 抛弃图片的视觉效果 盒模型变化(多列布局和弹性盒模型) 阴影效果 Web字体和web Font 图标 CSS33过渡与动画交互效果 媒体查询 ...
- css3 UI元素状态伪类选择器
选择器 说明 例子/备注 E:hover 当鼠标移到元素上元素所使用的样式 :hover{}或input:[type="text"]:hover{} E:active 当元素被激活 ...
- CSS3笔记
CSS/CSS3在线手册:http://www.css119.com/book/css/ CSS3实现水平垂直居中:http://bbs.html5cn.org/thread-87300-1-1. ...
- 前端必须要掌握的几个CSS3的属性
随着Css3和html5的风靡,越来越多的前端人员开始学习Css3,今天的文章就是来说说前端应该掌握10个Css3属性. 1. Border-radius Border-radius是一大堆CSS3属 ...
- CSS3学习笔记1-选择器和新增属性
前言:之前自学了一些关于CSS3的知识,在学习过程中也遇到过坑,不过总算磕磕绊绊的学习完了关于CSS3的相关知识,于是最近把之前的笔记和代码整理了一下,也算是一个对CSS3知识的回顾复习吧,也希望能够 ...
- CSS3系列一(概述、选择器、使用选择器插入内容)
CSS3模块化结构 CSS历史发展 CSS(Cascading Style Sheet),层叠样式表,是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言. CSS3属性选择器 E[att ...
随机推荐
- Python核心编程第二版(中文).pdf 目录整理
python核心编程目录 Chapter1:欢迎来到python世界!-页码:7 1.1什么是python 1.2起源 :罗萨姆1989底创建python 1.3特点 1.3.1高级 1.3.2面向 ...
- spring MVC 初探 (HelloWorld)
1.使用spring MVC 需要导入相关jar包 2.web.xml 启用spring MVC <servlet> <servlet-name>spring3mvc</ ...
- mysql之SQL---存储过程
1.存储过程简介 我们常用的操作数据库语言SQL语句在执行的时候需要要先编译,然后执行,而存储过程(Stored Procedure)是一组为了完成特定功能的SQL语句集,经编译后存储在数据库中,用 ...
- python函数的参数传递问题---传值还是传引用?
摘要:在python中,strings, tuples, 和numbers是不可更改的对象,而list,dict等则是可以修改的对象.不可更改对象的传递属于传值,可更改对象属于传引用.想要在函数中传递 ...
- HTML学习(四)样式
通过使用 HTML4.0,所有的格式化代码均可移出 HTML 文档,然后移入一个独立的样式表. 实例:例1:本例演示如何使用添加到 <head> 部分的样式信息对 HTML 进行格式化.& ...
- vim中c/c++源码跳转
在使用vim阅读c/c++代码的时候,代码跳转很重要, 在学习redis代码的时候遇到这个问题. 网上查找之后通过实践发现cscope比较好用,可以很方便的实现跳转 1. 安装cscope sudo ...
- ajax常用写法
$.ajax( url,{ type:"post", data:{},}) .done(function() { alert("success"); }) .f ...
- ucos内存管理原理详解
应用程序中为了某种特殊需要,经常需要动态的分配内存,而操作系统的特质置一,就是能不能保证动态内存分配的时效性,也就是说分配时间是可确定的 Ucos提供内存分配功能,它将内存空间分为两级管理,将一块连续 ...
- BMP085气压传感器驱动
BMP085是新一代的小封装气压传感器,主要用于气压温度检测,在四轴飞行器上可以用作定高检测,该传感器属于IIC总线接口,依然沿用标准IIC驱动程序 使用该传感器需要注意的是我们不能直接读出转换好的二 ...
- Java中的条件编译(转)
源:Java中的条件编译 一直以来,不知道怎么在Java中实现像C/C++一样的#ifdef...#endif这样的预编译宏,致使Java代码中一直用if判断,刚好刚才看到了解决办法,记录一下. C/ ...