ylbtech-CSS3:CSS3 边框
1.返回顶部
1、

CSS3 边框

CSS3 边框

用 CSS3,你可以创建圆角边框,添加阴影框,并作为边界的形象而不使用设计程序,如 Photoshop。

在本章中,您将了解以下的边框属性:

  • border-radius
  • box-shadow
  • border-image

CSS3 圆角

在 CSS2 中添加圆角棘手。我们不得不在每个角落使用不同的图像。

在 CSS3 中,很容易创建圆角。

在 CSS3 中 border-radius 属性被用于创建圆角:

这是圆角边框!

实例

在div中添加圆角元素:

div
{
border:2px solid;
border-radius:25px;
}

尝试一下 »


CSS3 盒阴影

CSS3 中的 box-shadow 属性被用来添加阴影:

 

实例

在div中添加box-shadow属性

div
{
box-shadow: 10px 10px 5px #888888;
}

尝试一下 »


CSS3 边界图片

有了 CSS3 的 border-image 属性,你可以使用图像创建一个边框:

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、
2.返回顶部
 
3.返回顶部
 
4.返回顶部
 
5.返回顶部
1、
2、
 
6.返回顶部
 
作者:ylbtech
出处:http://ylbtech.cnblogs.com/
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

CSS3:CSS3 边框的更多相关文章

  1. CSS3 border-radius边框圆角

    在CSS3中提供了对边框进行圆角设定的支持,可对边框1~4个角进行圆角样式设置. 目录 1. 介绍 2. value值的格式和类型 3. border-radius 1~4个参数说明 4. 在线示例 ...

  2. CSS3之边框图片border-image

    CSS3中有关border的属性,还有很多,今天我将为大家介绍一个很好玩的属性——Border-image.有了CSS3之边框图片Border-image,我们可以轻松搞定圆角,轻松搞定很多之前难搞的 ...

  3. 纯代码利用CSS3 圆角边框和盒子阴影 制作 iphone 手机效果

    原文:纯代码利用CSS3 圆角边框和盒子阴影 制作 iphone 手机效果 大家好,我是小强老师. 今天我们看下CSS3最为简单的两个属性. css3给我们带来了很多视觉的感受和变化,以前的图片做的事 ...

  4. 6种炫酷的CSS3按钮边框动画特效

    6种炫酷的CSS3按钮边框动画特效Button border animate 用鼠标滑过下面的按钮看看效果! Draw Draw Meet Center Spin Spin Circle Spin T ...

  5. CSS3图片边框

    CSS3图片边框 顾名思义就是为边框应用背景图片,它和我们常用的background属性比较相似,语法规则:

  6. css3(border-radius)边框圆角详解(转)

    css3(border-radius)边框圆角详解 (2014-05-19 16:16:29) 转载▼ 标签: divcss html it css3 分类: 网页技术 传统的圆角生成方案,必须使用多 ...

  7. css3圆角边框

    圆角边框 一.border-radius属性简介   为元素添加圆角边框,可以对元素的四个角进行圆角设置(属性不具有继承性) 二.border-radius定义方法 border-radius属性有两 ...

  8. css3新增边框、阴影、边框、背景、文本、字体

    css3和css有什么区别?简单来讲css3是css(层叠样式表)技术的升级版本,css3新特征有很多,例如圆角效果.图形化边界.块阴影与文字阴影.使用RGBA实现透明效果.渐变效果.使用@Font- ...

  9. 鼠标悬停显示CSS3动画边框

    效果体验:http://keleyi.com/keleyi/phtml/css3/14.htm 以下是代码: <!DOCTYPE html> <html xmlns="ht ...

  10. css3(border-radius)边框圆角详解

    传统的圆角生成方案,必须使用多张图片作为背景图案.CSS3的出现,使得我们再也不必浪费时间去制作这些图片了,只需要border-radius属性,支持浏览器IE 9.Opera 10.5.Safari ...

随机推荐

  1. 【LeetCode 25】K 个一组翻转链表

    题目链接 [题解] 模拟就好. 就k个k个节点地翻转. 每个节点都把next域指向它前面那个节点 修改完之后把这个节点前面的那个节点的next域改成这一段的最后一个节点. 然后把这一段最左边的那个节点 ...

  2. BZOJ 3998: [TJOI2015]弦论(后缀自动机)

    传送门 解题思路 \(T=0\)时就和SP7258一样,\(T=1\)时其实也差不多,只不过要把每个点原来是\(1\)的权值改为\(Right\)集合的大小. 代码 #include<iostr ...

  3. CF 1076E Vasya and a Tree(线段树+树剖)

    传送门 解题思路 首先按照每个修改时\(x\)的深度\(+d\)从大到小排序,然后按照深度分层,一层一层的修改,修改的时候就直接暴力修改子树,然后每做完一层把答案都取下来,因为以后的所有修改的深度都小 ...

  4. mac os 下安装mysql

    在 http://dev.mysql.com/downloads/mysql/ 选择下载mysql 注册并选择相应的版本后,得到下载链接:: wget http://dev.mysql.com/get ...

  5. Linux c基本知识整理

    1.指针和引用的区别 1.指针是一个变量,变量存储一个地址指向内存中一个存储单元,需要单独分配内存空间.引用相当于变量的别名,不需要单独分配空间 2.引用必须初始化,指针可以先不进行初始化 3.指针可 ...

  6. 剑指offer第二版面试题3:二维数组中的查找(JAVA版)

    题目: 在一个二维数组中,每一行都按照从左到右递增的顺序排序,每一列都按照从上到下递增的顺序排序.请完成一个函数,输入这样的一个二维数组和一个整数,判断数组中是否含有该整数. 1 2 8 9 2 4 ...

  7. Navicat for MySQL使用手记

    摘要 在管理MySQL数据库的图形化工具中,最为熟知的就是phpMyAdmin和Mysql-Front了,今天跟大家分享另外一个管理mysql数据库的另外一个利器---Navicat MySQL. N ...

  8. 6.2_springboot2.x分布式整合Dubbo

    1.分布式应用 ​ 在分布式系统中,国内常用zookeeper+dubbo组合,而Spring Boot推荐使用全栈的Spring,Spring Boot+Spring Cloud. 分布式系统: 特 ...

  9. iOS组件化开发-CocoaPods安装

    首先要检查Mac是否安装了rvm(ruby version manager).打开终端,输入指令$ rvm -v ,若没有安装 curl -L https://get.rvm.io | bash -s ...

  10. vscode编程nodejs初始安装

    nodejs官网 http://nodejs.cn/ 1.安装nodejs,记得安装时勾选配置路径 在cmd中输入node,进去node环境即为安装成功. 2.安装vscode,并安装插件node e ...