CSS3圆角边框和边界图片效果实例


Posted in HTML / CSS onJuly 01, 2016

本文的学习要点如下:

 •圆角 border-radius
 •盒阴影 box-shadow
 •边界图片 border-image
 
1.圆角 border-radius

XML/HTML Code复制内容到剪贴板
  1. <div>border-radius 属性允许您为元素添加圆角边框! </div>  
  2.   
  3. div {   
  4.     width: 200px;   
  5.     height: 100px;   
  6.     padding:20px;   
  7.     border: 1px solid red;   
  8.     border-radius : 25px;      
  9. }   

2.盒阴影 box-shadow

XML/HTML Code复制内容到剪贴板
  1. <div></div>  
  2.   
  3. div {   
  4.     width: 200px;   
  5.     height: 100px;   
  6.     background: red;   
  7.     /*x轴偏移量 y轴偏移量 模糊程度 阴影颜色*/   
  8.     box-shadow: 10px 10px 5px #000;   
  9. }   
  10.   

3.边界图片 border-image

html部分

XML/HTML Code复制内容到剪贴板
  1. <p><b>注意: </b> Internet Explorer 不支持 border-image 属性。</p>  
  2. <p> border-image 属性用于设置图片的边框。</p>  
  3.   
  4. <div id="round">这里,图像平铺(重复)来填充该区域。</div>  
  5. <br>  
  6. <div id="stretch">这里,图像被拉伸以填充该区域。</div>  
  7.   
  8. <p>这是我们使用的图片素材:</p>  
  9. <img src="images/border.png" />  
  10.   

css部分

CSS Code复制内容到剪贴板
  1. div {   
  2.     width250px;   
  3.     padding10px 20px;   
  4.     border15px solid translate;   
  5. }   
  6. #round {   
  7.     /*safari*/  
  8.     /*图片源 图片边界向内偏移量 图片的宽度 用于指定在边框外部绘制 border-image-area 的量  样式*/  
  9.     -webkit-border-image : url(../images/border.png) 30 30 round;   
  10.     /*opera*/  
  11.     -o-border-image : url(../images/border.png) 30 30 round;   
  12.     border-image : url(../images/border.png) 30 30 round;   
  13. }   
  14.   
  15. #stretch {   
  16.     -webkit-border-image : url(../images/border.png) 30 30 stretch;   
  17.     -o-border-image : url(../images/border.png) 30 30 stretch;   
  18.     border-image : url(../images/border.png) 30 30 stretch;   
  19. }   
  20.   

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
基础的CSS3弹性盒Flexbox布局使用实例
Apr 08 HTML / CSS
CSS3常用的几种颜色渐变模式总结
Nov 18 HTML / CSS
使用javascript和HTML5 Canvas画的四渐变色播放按钮效果
Apr 10 HTML / CSS
HTML5 localStorage使用总结
Feb 22 HTML / CSS
深入浅析HTML5中的article和section的区别
May 15 HTML / CSS
详解Html5页面实现下载文件(apk、txt等)的三种方式
Oct 22 HTML / CSS
html5视频媒体标签video的使用方法及完整参数说明详解
Sep 27 HTML / CSS
html5中嵌入视频自动播放的问题解决
May 25 HTML / CSS
元素水平垂直居中的方式
Mar 31 HTML / CSS
CSS3实现的3D隧道效果
Apr 27 HTML / CSS
CSS几步实现赛博朋克2077风格视觉效果
Jun 16 HTML / CSS
CSS 使用 resize 实现图片拖拽切换预览功能(强大功能)
Aug 23 HTML / CSS
CSS3制作酷炫的三维相册效果
Jul 01 #HTML / CSS
CSS3的column-fill属性对齐列内容高度的用法详解
Jul 01 #HTML / CSS
使用CSS3的box-sizing属性解决div宽高被内边距撑开的问题
Jun 28 #HTML / CSS
老生常谈CSS中的长度单位
Jun 27 #HTML / CSS
CSS3制作彩色进度条样式的代码示例分享
Jun 23 #HTML / CSS
css3 transform及原生js实现鼠标拖动3D立方体旋转
Jun 20 #HTML / CSS
CSS3实现3D翻书效果
Jun 20 #HTML / CSS
You might like
PHP 网页过期时间的控制代码
2009/06/29 PHP
最新用php获取谷歌PR值算法,附上php查询PR值代码示例
2011/12/25 PHP
深入php self与$this的详解
2013/06/08 PHP
Thinkphp和Bootstrap结合打造个性的分页样式(推荐)
2016/08/01 PHP
layui框架实现文件上传及TP3.2.3(thinkPHP)对上传文件进行后台处理操作示例
2018/05/12 PHP
PHP的mysqli_set_charset()函数讲解
2019/01/23 PHP
javascript学习笔记(十二) RegExp类型介绍
2012/06/20 Javascript
用js调用迅雷下载代码的二种方法
2013/04/15 Javascript
JS 获取浏览器和屏幕宽高等信息的实现思路及代码
2013/07/31 Javascript
js判断横竖屏及禁止浏览器滑动条示例
2014/04/29 Javascript
对JavaScript的全文搜索实现相关度评分的功能的方法
2015/06/24 Javascript
JavaScript代码轻松实现网页内容禁止复制(代码简单)
2015/10/23 Javascript
关于JS中setTimeout()无法调用带参函数问题的解决方法
2016/06/21 Javascript
微信jssdk用法汇总
2016/07/16 Javascript
js获取上传文件的绝对路径实现方法
2016/08/02 Javascript
利用Angularjs和原生JS分别实现动态效果的输入框
2016/09/01 Javascript
AngularJS表单提交实例详解
2017/02/18 Javascript
JS实现的五级联动菜单效果完整实例
2017/02/23 Javascript
基于react组件之间的参数传递(详解)
2017/09/05 Javascript
JavaScript 复制对象与Object.assign方法无法实现深复制
2018/11/02 Javascript
使用jQuery如何写一个含验证码的登录界面
2019/05/13 jQuery
python通过shutil实现快速文件复制的方法
2015/03/14 Python
Django发送html邮件的方法
2015/05/26 Python
python获取一组数据里最大值max函数用法实例
2015/05/26 Python
python之Socket网络编程详解
2016/09/29 Python
Python3.5常见内置方法参数用法实例详解
2019/04/29 Python
keras获得某一层或者某层权重的输出实例
2020/01/24 Python
Superdry极度干燥美国官网:英国制造的服装品牌
2018/11/13 全球购物
Carolina工作鞋官网:Carolina Footwear
2019/03/14 全球购物
师范生教师实习自我鉴定
2013/09/27 职场文书
法学研究生自我鉴定范文
2013/12/04 职场文书
乔布斯斯坦福大学演讲稿
2014/05/23 职场文书
保研推荐信范文
2015/03/25 职场文书
ORACLE数据库应用开发的三十个注意事项
2021/06/07 Oracle
Python GUI编程之tkinter 关于 ttkbootstrap 的使用详解
2022/03/03 Python
MySQL创建管理KEY分区
2022/04/13 MySQL