CSS-边框-效果
1.1边框
其中边框圆角、边框阴影属性,应用十分广泛,兼容性也相对较好,具有符合渐进增强原则的特性,我们需要重点掌握。
1.1.1边框圆角
border-radius 每个角可以设置两个值,x值,y值
1:边框圆角处理
2:正方形
border-radius{
width:200px;
height:200px;
margin:100px auto;
background-color:green;
/*
border-radius:100px 100px 100px 100px /
border-radius:50px 100px 50px;
//四个角都是100px
border-radius:100px;
//表示1,3是100px 2,4是50px
border-radius:100px 50px;
*/
}
3:椭圆
圆角处理时,脑中要形成圆、圆心、横轴、纵轴的概念,正元是椭圆的一种特殊情况。如下图
可分别设置长短半径,以“/”进行分隔,遵循“1,2,3,4”规则,前面的1~4个用来设置横轴半径(分别对应横轴1、2、3、4位置),“/”后面1~4个参数用设置纵轴半径(分别对应纵轴1、2、3、4位置)
1.1.2边框阴影
box-shadow 与text-shadow的用法差不多
1、水平偏移量 正值向右,负值向左
2、垂直偏移量 正值向下,负值向上
box-shadow:5px 5px 27lpx red,-5px -5px 27px green;
3、模糊度不能为负值
4、inset可以设置内阴影
.item:last-child{
box-shadow:inset 5px 5px 27px red,inset -5px -5px 27px green;
}
设置边框阴影不会改变盒子的大小,既不会影响其兄弟元素的布局。可以设置多重边框· 阴影,实现更好的效果,增强立体感觉。
1.1.3边框图片
border-images:url("iamges/border.png")27px/20px round
border-images设置边框的背景图片。
border-images-source:url("")设置边框图片的路径
//裁剪图片,如何去裁切图片,浏览器会自动其裁切图片
border-images-slice:27,27,27,27
//指定边框的宽高
border-images-width:20px
//边框平铺的样式 stretch 拉升
round会自动调整缩放比例
repeat(重复)
border-images-repeat:stretch;
设置的图片将会被“切割”成九宫格形式,然后进行设置。如下图:
“切割”完成后生成虚拟的9块图形,然后按对应位置设置背景,其中四个角位置、形状保持不变,中心位置水平垂直两个方向平铺,如图
1、round和repeat之间的区别
round会自动调整尺寸,完整显示边框图片
repeat单纯平铺多余部分,会被“裁切”而不能完整显示。
2、 更改裁切尺寸
background-slice:34 36 27 27 分别设置裁切如下图
关于边框图片重点理解9宫格的裁切及平铺方式,实际开发中应用不广泛,但是如能灵活动用会给我们带来不少便利。
1.1.4案例 用css实现
代码实现:
CSS-边框-效果的更多相关文章
- CSS边框效果
前面的话 本文将详细介绍CSS边框效果 半透明边框 border:10px solid hsla(0, 0%, 100%,.5); background-clip:padding-box; 缝边效果 ...
- css 使用background背景实现border边框效果
css中,我们一般使用border给html元素设置边框,但也可以使用background背景来模拟css边框效果,本文章向大家介绍css 使用background背景实现border边框效果,需要的 ...
- CSS属性定义 文本修饰 边框效果 背景修饰
一.CSS属性定义1.css颜色表示方法[重点]rgb(红绿蓝3个颜色通道 强度值为0-255)rgb(0,0,0)rgba(alpha a是透明度 值为0-1)rgba(123,123,123,0) ...
- CSS鼠标悬停图片加边框效果,不位移的方法
<!DOCTYPE HTML> <html lang="en-US"> <head> <title>css实现鼠标悬停时图片加边框效 ...
- css的img移上去边框效果及CSS透明度
css的img移上去边框效果: .v_comment img{ height:36px; height:36px; float:left; padding:1px; margin:2px; borde ...
- CSS 边框 阴影 效果
CSS 边框 阴影 效果 以下将css实现阴影效果,以便须要朋友们,直接上代码 #shadow1{ width: 200px; height: 100px; color: white; backgro ...
- CSS鼠标悬停图片加边框效果,页面布局发生错位的解决办法
CSS鼠标悬停图片加边框效果,页面布局发生错位的解决办法 .recomend-list{ width:1200px; a{ @extend %fl; margin-right: 30px; width ...
- 理解CSS边框border
前面的话 边框是CSS盒模型属性中默默无闻的一个普通属性,CSS3的到来,但得边框属性重新焕发了光彩.本文将详细介绍CSS边框 基础样式 边框是一条以空格分隔的集合样式,包括边框粗细(边框宽度 ...
- 赞!15个来自 CodePen 的酷炫 CSS 动画效果
CodePen 是一个在线的前端代码编辑和展示网站,能够编写代码并即时预览效果.你在上面可以在线分享自己的 Web 作品,也可以欣赏到世界各地的优秀开发者在网页中实现的各种令人惊奇的效果. 今天这篇文 ...
- 第 17 章 CSS 边框与背景[下]
学习要点: 1.设置背景 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS 边框和背景,通过边框和背景的样式设置,给元素增加更丰富的外观. 一.设置背景 盒模型的尺寸可以通过两种方式实现可见性, ...
随机推荐
- Redis 安装教程 (Windows 2.6.13 稳定版)
redis是一个key-value存储系统.和Memcached类似,它支持存储的value类型相对更多,包括string(字符串).list(链表).set(集合).zset(sorted set ...
- Linux串口编程のtermios 结构
termios 结构是在POSIX规范中定义的标准接口,它类似于系统V中的termio接口,通过设置termios类型的数据结构中的值和使用一小 组函数调用,你就可以对终端接口进行控制. 可以被调整来 ...
- js基础-需要注意的地方
---因为跟别的语言很像,所以只记录要注意的地方 1.== 和 === 的区别 ===要求类型也相等 "5"==5 = ture "5"===5 = false ...
- 使用 Require.js 引用第三方框架时遇到的一些情况
使用 Require.js 引用第三方框架时遇到的一些情况 在使用Require.js解析依赖的时候,会出现以下几种情况: 程序中的依赖关系 当前程序 依赖于 B包, B包 依赖于 A包 A包与B包两 ...
- (转)JAVA路径问题及命令行编译运行基础(linux下)
原地址: http://blog.csdn.net/biaobiaoqi/article/details/6846274 java的运行机制的基本概念: 源文件 也就是我们熟知的.java文件. 类文 ...
- mybatis动态SQL的<set>条件
写代码,作笔记是个好习惯: <update id="update" parameterType="FaultMainten"> update FAU ...
- yii2 去掉index.php的方法
1.开启apache-rewrite 在Windows下,我们一般使用的是Administrator账号,所以启用这两项非常简单: 在[Apache安装目录]/conf/httpd.conf中找到 # ...
- project euler 19: Counting Sundays
import datetime count = 0 for y in range(1901,2001): for m in range(1,13): if datetime.datetime(y,m, ...
- python中__init__.py文件的作用
问题 在执行models.py时,报ImportError:No module named transwarp.db的错误,但明明transwarp下就有db.py文件,路径也没有错误.真是想不通.后 ...
- C#代码实现,确保windows程序只有一个实例(instance)
static class Program { /// <summary> /// 应用程序的主入口点. /// </summary> [STAThread] static vo ...