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 ...
随机推荐
- 【LeetCode 25】K 个一组翻转链表
题目链接 [题解] 模拟就好. 就k个k个节点地翻转. 每个节点都把next域指向它前面那个节点 修改完之后把这个节点前面的那个节点的next域改成这一段的最后一个节点. 然后把这一段最左边的那个节点 ...
- BZOJ 3998: [TJOI2015]弦论(后缀自动机)
传送门 解题思路 \(T=0\)时就和SP7258一样,\(T=1\)时其实也差不多,只不过要把每个点原来是\(1\)的权值改为\(Right\)集合的大小. 代码 #include<iostr ...
- CF 1076E Vasya and a Tree(线段树+树剖)
传送门 解题思路 首先按照每个修改时\(x\)的深度\(+d\)从大到小排序,然后按照深度分层,一层一层的修改,修改的时候就直接暴力修改子树,然后每做完一层把答案都取下来,因为以后的所有修改的深度都小 ...
- mac os 下安装mysql
在 http://dev.mysql.com/downloads/mysql/ 选择下载mysql 注册并选择相应的版本后,得到下载链接:: wget http://dev.mysql.com/get ...
- Linux c基本知识整理
1.指针和引用的区别 1.指针是一个变量,变量存储一个地址指向内存中一个存储单元,需要单独分配内存空间.引用相当于变量的别名,不需要单独分配空间 2.引用必须初始化,指针可以先不进行初始化 3.指针可 ...
- 剑指offer第二版面试题3:二维数组中的查找(JAVA版)
题目: 在一个二维数组中,每一行都按照从左到右递增的顺序排序,每一列都按照从上到下递增的顺序排序.请完成一个函数,输入这样的一个二维数组和一个整数,判断数组中是否含有该整数. 1 2 8 9 2 4 ...
- Navicat for MySQL使用手记
摘要 在管理MySQL数据库的图形化工具中,最为熟知的就是phpMyAdmin和Mysql-Front了,今天跟大家分享另外一个管理mysql数据库的另外一个利器---Navicat MySQL. N ...
- 6.2_springboot2.x分布式整合Dubbo
1.分布式应用 在分布式系统中,国内常用zookeeper+dubbo组合,而Spring Boot推荐使用全栈的Spring,Spring Boot+Spring Cloud. 分布式系统: 特 ...
- iOS组件化开发-CocoaPods安装
首先要检查Mac是否安装了rvm(ruby version manager).打开终端,输入指令$ rvm -v ,若没有安装 curl -L https://get.rvm.io | bash -s ...
- vscode编程nodejs初始安装
nodejs官网 http://nodejs.cn/ 1.安装nodejs,记得安装时勾选配置路径 在cmd中输入node,进去node环境即为安装成功. 2.安装vscode,并安装插件node e ...