CSS3边框特效

1.边框阴影:box-shadow:30px 10px 10px 10px black;

(1)水平方向的阴影,负值向左偏移。

(2)垂直方向阴影,负值向上偏移。

(3)代表阴影模糊度,最小为0,模糊代表越往外侧颜色越浅。

(4)阴影的外延值,代表阴影所占据的范围。

(5)阴影的颜色,可以省略,默认为黑色。

box-shadow:30px 10px 10px;(三个值,阴影的外延值就不存在了)。

box-shadow:30px 10px;(两个值,阴影的模糊度和外延值就不存在了)。

insert代表阴影出现在元素的内部,大于0出现在左和上,小于0出现在右和下。

box-shadow:insert 10px -10px;

2.圆角

border-radius:10px 30px;(代表左上,右下)

border-radius:10px 30px 50px;(代表右上,右下,左下)

border-radius:10px 30px 50px 70px(按顺时针显示左上,右上,右下,左下)

border-radius:100px(水平)/50px(垂直)     (水平的椭圆)

时间: 2024-08-18 06:34:04

CSS3边框特效的相关文章

CSS3鼠标滑过动画线条边框特效

基于CSS属性animation动画制作,效果流畅弹性十足 效果展示 http://hovertree.com/texiao/css3/32/ 源码下载:http://hovertree.com/h/bjaf/fo1jlmhi.htm 效果图如下: 代码如下: <!doctype html> <html> <head> <meta charset="utf-8"> <meta name="renderer" co

CSS3+HTML5特效8 - 顶部和右侧固定,左侧随窗口变化的布局

原文:CSS3+HTML5特效8 - 顶部和右侧固定,左侧随窗口变化的布局 效果演示 实现原理 使用3个div(一个是顶部栏,一个是左侧栏,一个是右侧栏): 使用checkbox作为判断是否显示和隐藏右侧栏,点击显示和隐藏label实现最终效果. 代码说明 css + ? 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 37 38 39 40 41

CSS3悬停特效合集Hover.css

CSS3悬停特效合集Hover.css是一款特效丰富,支持2D变化特效.边框特效.阴影特效等: 使用简单,可直接复制相关特效代码,快速应用到元素上. 源码地址:http://www.huiyi8.com/sc/11119.html CSS3悬停特效合集Hover.css

CSS3边框与背景

参考: http://www.runoob.com/css3/css3-tutorial.html CSS3被拆分为"模块".旧规范已拆分成小块,还增加了新的. 一些最重要CSS3模块如下: 选择器 盒模型 背景和边框 文字特效 2D/3D转换 动画 多列布局 用户界面  1.CSS3边框: 用 CSS3,你可以创建圆角边框,添加阴影框,并作为边界的形象而不使用设计程序,如 Photoshop. 在本章中,您将了解以下的边框属性: border-radius box-shadow bo

CSS3边框 阴影 box-shadow

box-shadow是向盒子添加阴影.支持添加一个或者多个. box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式]; 参数介绍: box-shadow: h-shadow v-shadow blur spread color inset; h-shadow:水平阴影的偏移值,必需,可以为负值. v-shadow:纵向阴影的偏移值,必需,可以为负值. blur:阴影模糊值,可选,不能为负值. spread:阴影的扩展,可选,可以为负值. c

CSS3+HTML5特效9 - 简单的时钟

原文:CSS3+HTML5特效9 - 简单的时钟 效果演示(加快了100倍) 实现原理 利用CSS3的transform-origin 及 transform 完成以上效果. 代码及说明 1 <style> 2 @-webkit-keyframes rotateLabel { 3 0%{ 4 -webkit-transform-origin:0% 100%; 5 -webkit-transform: rotate(0deg); 6 } 7 100%{ 8 -webkit-transform-o

《图解CSS3——第3章 CSS3边框-1》

提到边框,大家首先想到的是CSS的boder属性.不错,border属性是CSS种盒模型基础属性之一.在CSS3中,关于边框的运用会有什么样的不同之处呢?又将如何使用?本章我们带着这些问题开始我们的CSS3边框之旅. 3.1 CSS3边框简介 border属性在CSS1中就已经定义了,使用它可以设置元素的边框风格. 3.1.1 边框的基本属性 CSS1和CSS2中的边框属性确实很简单,其主要包括三个类型值. border-width:设置元素边框的粗细. border-color:设置元素边框的

CSS3边框温故

1.简介:border属性在CSS1中就已经定义了,用来设置元素边框风格,设置不同的边框.颜色.粗细 2.基本属性,包括三个类型值:(1)border-width:设置元素边框的粗细,默认3~4px(2)border-color:设置元素边框的颜色,默认色就是字体颜色(3)border-style:设置元素边框的类型,默认[none]缩写语法:border:border-width border-style border-color;注:缩写后每个属性之间使用空格隔开,它们之间没有先后顺序 3.

css3动画特效:上下晃动的div

css3动画特效:上下晃动的div <div id="square" class="container animated">上下晃动</div> /** * transform-origin 设置旋转元素的基点位置 * animation-name 设置动画名称 * animation-duration 设置动画时间 * animation-fill-mode 设置播放后的状态 * animation-iteration-count 设置循环