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 相关文章推荐
IE下实现类似CSS3 text-shadow文字阴影的几种方法
May 11 HTML / CSS
常用的四种CSS透明属性介绍
Apr 12 HTML / CSS
分享CSS3制作卡片式图片的方法
Jul 08 HTML / CSS
CSS3毛玻璃效果(blur)有白边问题的解决方法
Nov 15 HTML / CSS
css3 实现圆形旋转倒计时
Feb 24 HTML / CSS
HTML5 Canvas API中drawImage()方法的使用实例
Mar 25 HTML / CSS
HTML5资源预加载(Link prefetch)详细介绍(给你的网页加速)
May 07 HTML / CSS
HTML5 canvas基本绘图之图形变换
Jun 27 HTML / CSS
前端实现弹幕效果的方法总结(包含css3和canvas的实现方式)
Jul 12 HTML / CSS
3种方式实现瀑布流布局小结
Sep 05 HTML / CSS
AmazeUI在模态框中嵌入表单形成模态输入框
Aug 20 HTML / CSS
用CSS3画一个爱心
Apr 27 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
Godaddy空间Zend Optimizer升级方法
2010/05/10 PHP
让PHP支持断点续传的源码
2010/05/16 PHP
PHP的范围解析操作符(::)的含义分析说明
2011/07/03 PHP
php学习笔记(三)操作符与控制结构
2011/08/06 PHP
Thinkphp模板中使用自定义函数的方法
2012/09/23 PHP
php简单smarty入门程序实例
2015/06/11 PHP
Zend Framework教程之Zend_Config_Ini用法分析
2016/03/23 PHP
py文件转exe时包含paramiko模块出错解决方法
2016/08/12 PHP
PHP实现合并两个排序链表的方法
2018/01/19 PHP
js 表单验证方法(实用)
2009/04/28 Javascript
javascript dom 操作详解 js加强
2009/07/13 Javascript
javascript之bind使用介绍
2011/10/09 Javascript
jquery post方式传递多个参数值后台以数组的方式进行接收
2013/01/11 Javascript
深入探究JavaScript中for循环的效率问题及相关优化
2016/03/13 Javascript
jQuery height()、innerHeight()、outerHeight()函数的区别详解
2016/05/23 Javascript
Javascript小技能总结(推荐)
2016/06/02 Javascript
js实现表单及时验证功能 用户信息立即验证
2016/09/13 Javascript
一篇文章搞定JavaScript类型转换(面试常见)
2017/01/21 Javascript
JavaScript基础之流程控制语句的用法
2017/08/31 Javascript
JS实现自定义弹窗功能
2018/08/08 Javascript
详解如何模拟实现node中的Events模块(通俗易懂版)
2019/04/15 Javascript
详解vue中$nextTick和$forceUpdate的用法
2019/12/11 Javascript
详解vue3中组件的非兼容变更
2021/03/03 Vue.js
[54:45]2018DOTA2亚洲邀请赛 4.1 小组赛 A组 Optic vs OG
2018/04/02 DOTA
python使用递归解决全排列数字示例
2014/02/11 Python
python逐行读写txt文件的实例讲解
2018/04/03 Python
python使用正则来处理各种匹配问题
2019/12/22 Python
Python使用uuid库生成唯一标识ID
2020/02/12 Python
python 图像判断,清晰度(明暗),彩色与黑白实例
2020/06/04 Python
Volcom法国官网:美国冲浪滑板品牌
2017/05/25 全球购物
MaBelle玛贝尔香港官网:香港钻饰连锁店
2019/09/09 全球购物
运动会通讯稿50字
2014/01/30 职场文书
西式结婚主持词
2014/03/14 职场文书
体育教师求职信
2014/06/30 职场文书
民政局离婚协议书范本
2014/10/20 职场文书
基于redis+lua进行限流的方法
2022/07/23 Redis