CSS3:CSS3 边框
ylbtech-CSS3:CSS3 边框 |
1.返回顶部 |
CSS3 边框
CSS3 边框
用 CSS3,你可以创建圆角边框,添加阴影框,并作为边界的形象而不使用设计程序,如 Photoshop。
在本章中,您将了解以下的边框属性:
- border-radius
- box-shadow
- border-image
CSS3 圆角
在 CSS2 中添加圆角棘手。我们不得不在每个角落使用不同的图像。
在 CSS3 中,很容易创建圆角。
在 CSS3 中 border-radius 属性被用于创建圆角:
CSS3 盒阴影
CSS3 中的 box-shadow 属性被用来添加阴影:
CSS3 边界图片
有了 CSS3 的 border-image 属性,你可以使用图像创建一个边框:
在 div 中使用图片创建边框:
实例
在 div 中使用图片创建边框
div
{
border-image:url(border.png) 30 30 round;
-webkit-border-image:url(border.png) 30 30 round; /* Safari 5 and older */
-o-border-image:url(border.png) 30 30 round; /* Opera */
}
新边框属性
属性 | 说明 | CSS |
---|---|---|
border-image | 设置所有边框图像的速记属性。 | 3 |
border-radius | 一个用于设置所有四个边框- *-半径属性的速记属性 | 3 |
box-shadow | 附加一个或多个下拉框的阴影 | 3 |
2.返回顶部 |
3.返回顶部 |
4.返回顶部 |
5.返回顶部 |
6.返回顶部 |
作者:ylbtech 出处:http://ylbtech.cnblogs.com/ 本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。 |
CSS3:CSS3 边框的更多相关文章
- CSS3 border-radius边框圆角
在CSS3中提供了对边框进行圆角设定的支持,可对边框1~4个角进行圆角样式设置. 目录 1. 介绍 2. value值的格式和类型 3. border-radius 1~4个参数说明 4. 在线示例 ...
- CSS3之边框图片border-image
CSS3中有关border的属性,还有很多,今天我将为大家介绍一个很好玩的属性——Border-image.有了CSS3之边框图片Border-image,我们可以轻松搞定圆角,轻松搞定很多之前难搞的 ...
- 纯代码利用CSS3 圆角边框和盒子阴影 制作 iphone 手机效果
原文:纯代码利用CSS3 圆角边框和盒子阴影 制作 iphone 手机效果 大家好,我是小强老师. 今天我们看下CSS3最为简单的两个属性. css3给我们带来了很多视觉的感受和变化,以前的图片做的事 ...
- 6种炫酷的CSS3按钮边框动画特效
6种炫酷的CSS3按钮边框动画特效Button border animate 用鼠标滑过下面的按钮看看效果! Draw Draw Meet Center Spin Spin Circle Spin T ...
- CSS3图片边框
CSS3图片边框 顾名思义就是为边框应用背景图片,它和我们常用的background属性比较相似,语法规则:
- css3(border-radius)边框圆角详解(转)
css3(border-radius)边框圆角详解 (2014-05-19 16:16:29) 转载▼ 标签: divcss html it css3 分类: 网页技术 传统的圆角生成方案,必须使用多 ...
- css3圆角边框
圆角边框 一.border-radius属性简介 为元素添加圆角边框,可以对元素的四个角进行圆角设置(属性不具有继承性) 二.border-radius定义方法 border-radius属性有两 ...
- css3新增边框、阴影、边框、背景、文本、字体
css3和css有什么区别?简单来讲css3是css(层叠样式表)技术的升级版本,css3新特征有很多,例如圆角效果.图形化边界.块阴影与文字阴影.使用RGBA实现透明效果.渐变效果.使用@Font- ...
- 鼠标悬停显示CSS3动画边框
效果体验:http://keleyi.com/keleyi/phtml/css3/14.htm 以下是代码: <!DOCTYPE html> <html xmlns="ht ...
- css3(border-radius)边框圆角详解
传统的圆角生成方案,必须使用多张图片作为背景图案.CSS3的出现,使得我们再也不必浪费时间去制作这些图片了,只需要border-radius属性,支持浏览器IE 9.Opera 10.5.Safari ...
随机推荐
- SQL SELECT TOP, LIMIT, ROWNUM
SQL SELECT TOP, LIMIT, ROWNUM SQL SELECT TOP 子句 SELECT TOP 子句用于指定要返回的记录数量. SELECT TOP子句在包含数千条记录的大型表上 ...
- Yii2 自定义组件
basic\components\HelloWidget namespace app\components; use yii\base\Widget; use yii\helpers\Html; cl ...
- Delphi 虚拟桌面
Delphi创建虚拟桌面实现后台调用外部程序 核心提示:最近在做的一个软件,其中有一部分功能需要调用其它的软件来完成,而那个软件只有可执行文件,根本没有源代码,幸好,我要做的事不难,只需要在我的程序启 ...
- unittest框架学习笔记二之discover
coding=utf-8'''Created on 2018/3/29 author:star Project:discover测试用例''' import unittest,time,oslist= ...
- 转-C++之手写strcpy
转自:strcpy函数的实现 知strcpy函数的原型是: char *strcpy(char *dst, const char *src); 实现strcpy函数 解释为什么要返回char * 假如 ...
- RabbitMQ使用(一)
1. 安装与使用 1. 激活 RabbitMQ's Management Plugin (前面跟绝对路径) "D:\娱乐\rabbitmq_server-3.6.5\sbin\rabbitm ...
- 17、通过maven生成测试报告
目录如下: 通过Maven 生成报告 进入testngTest根目录,运行mvn test 命令 进入 testngTest\target\surefire-reports 路径查看测试报告
- webstorm vue eslint 自动修正配置
原文:https://medium.com/@netczuk/even-faster-code-formatting-using-eslint-22b80d061461 https://stackov ...
- 区分slice,splice,split
原文:https://www.cnblogs.com/webjoker/p/5218114.html 1.slice(数组) 用法:array.slice(start,end) 解释:该方法是对数组进 ...
- Pandas异常值处理
import pandas as pd #生成异常数据 df=pd.DataFrame({'col1':[1,120,3,5,2,12,13], 'col2':[12,17,31,53,22,32,4 ...