CSS揭秘之多重边框的实现_CSS教程_CSS_网页制作

来源:脚本之家  责任编辑:小易  

1、CSS3圆角表格圆角表格,对应属性:border-radius。2、以往对网页上的文字加特效只能用filter这个属性,这7a686964616fe58685e5aeb931333339666663次CSS3中专门制订了一个加文字特效的属性,而且不止加阴影这种效果。对应属性:font-effect。3、丰富了对链接下划线的样式,以往的下划线都是直线,这次可不一样了,有波浪线、点线、虚线等等,更可对下划线的颜色和位置进行任意改变。(还有对应顶线和中横线的样式,效果与下划线类似)对应属性:text-underline-style,text-underline-color,text-underline-mode,text-underline-position。4、在文字下点几个点或打个圈以示重点,CSS3也开始加入了这项功能,这应该在某些特定网页上很有用。对应属性:font-emphasize-style和font-emphasize-position。边框(Borders)border-color:控制边框颜色,并且有了更大的灵活性,可以产生渐变效果border-image:控制边框图象 CSS3边框border-corner-image:控制边框边角的图象border-radius:能产生类似圆角矩形的效果背景(Backgrounds)background-origin:决定了背景在盒模型中的初始位置,提供了3个值,border,padding和contentborder:控制背景起始于左上角的边框padding:控制背景起始于左上角的留白content:控制背景起始于左上角的内容 CSS3背景background-clip:决定边框是否覆盖住背景(默认是不覆盖),提供了两个值,border和paddingborder:会覆盖住背景padding:不会覆盖背景background-size:可以指定背景大小,以象素或百分比显示。当指定为百分比时,大小会由所在区域的宽度、高度,以及background-origin的位置决定multiple backgrounds:多重背景图象,可以把不同背景图象只放到一个块元素里。文字效果(Text effects)text-shadow:文字投影,可能是因为MAC OSX的Safari浏览器开始支持投影才特意增加的。text-overflow:当文字溢出时,用“…”提示。包 CSS3文字效果括ellipsis、clip、ellipsis-word、inherit,前两个CSS2就有了,目前还是部分支持,但有趣的是IE6居然也支持。ellipsis-word可以省略掉最后一个单词,对中文意义不大,inherit可以继承父级元素。颜色(Color)HSL colors:除了支持RGB颜色外,还支持HSL(色相、饱和度、亮度)。以前一般都是作图的时候用HSL色谱,但这样一来会包括更多的颜色。H用度表示,S和L用百分比表示,比如hsl(0,100%,50%)HSLA colors:加了个不透明度(Apacity),用0到1之间的数来表示,比如hsla(0,100%,50%,0.2)opacity:直接控制不透明度,用0到1之间的数来表示RGBA colors:和HSLA colors类似,加了个不透明度。一直以来,浏览器的透明一直无法实现单纯的颜色透明,每次使用alpha后就会把透明的属性继承到子节点上。换句话说,很难实现背景颜色透明而文字不透明的效果。直到RGBA颜色的出现这一切将成为现实。实现这样的效果非常简单,设置颜色的时候我们使用标准的rgba()单位即可,例如rgba(255,0,0,0.4)这样就出现了一个红色同时拥有alpha透明为0.4的颜色。经过测试firefox3.0、safari3.2、opera10都支持了rgba单位。用户界面(User-interface)resize:可以由用户自己调整div的大小,有horizontal(水平)vertical(垂直)或者both(同时),或者同时调整。如果再加上max-width或min-width的话还可以防止破坏布局选择器(Selectors)CSS3增加了更多的CSS选择器,可以实现更简单但是更强大的功能,比如:nth-child()等。Attribute selectors:在属性中可以加入通配符,包括^,$,*[att^=val]:表示开始字符是val的att属性 CSS3选择器[att$=val]:表示结束字符是val的att属性[att*=val]:表示包含至少有一个val的att属性其它模块:(Other modules)media queries:感觉叫媒体选择比较合适,可以为网页中不同的对象设置不同的浏览设备。比如可以为某一块分别设置屏幕浏览样式和手机浏览样式,以前则只能设置整个网页。multi-column layout:多列布局,让文字以多列显示,包括column-width、column-count、column-gap三个值column-width:指定每列宽度column-count:指定列数column-gap:指定每列之间的间距column-rule-color:控制列间的颜色column-rule-style:控制列间的样式column-rule-width:控制列间的宽度column-space-distribution:平均分配列间距www.zgxue.com防采集请勿采集本网。

多重边框的两种实现方案:

    border-shadow outline

设置边框阴影不会影响盒子的布局,即不会影响其兄弟元素的布局 spread可以与blur、h-shadow、v-shadow相互抵消,blur不可为负值 可以设置多重边框阴影,实现更好的效果,增强立体感。by三人行慕

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Mutiple border</title></head><body> <style> .common { width: 25vw; height: 20vh; margin: 10%; background: gray; } .box-shadow { box-shadow: 0 0 0 10px #655, 0 0 0 15px deeppink, 0px 2px 5px 15px hsla(240, 100%, 50%, .5); } .inner-box-shadow { background: white; box-shadow: inset 0 0 40px hsla(0, 100%, 50%, 1); } .outline { border: 2px solid hsla(280, 100%, 50%, 1); outline: 2px dashed hsla(0, 0%, 100%, 1); outline-offset: -15px; border-radius: 10px; outline-width: 2px; } </style> <div class="common box-shadow"></div> <div class="common inner-box-shadow"></div> <div class="common outline"></div></body></html>

这个目前的css3及以前的css规则中没有提及到。目前能够对背景知进行的操作就是横向平铺(background-repeat:repeat-x)、纵向平铺(background-repeat:repeat-y)、完全平铺(background-repeat:

box-shadow

切削起点的确很难找,因为藏得很深。说不明白直接上图。①:进入加工方法点扳手 ②:把更多下拉菜单打开,红圈里面就是切削起点。③:点击高亮的那个按钮选择起点。④:选择完毕生成刀路。

以由逗号分隔的列表来描述一个或多个阴影效果。该属性可以让几乎所有元素的边框产生阴影。如果元素同时设置了 border-radius ,阴影也会有圆角效果。多个阴影的z-ordering 和多个 text shadows 规则相同(第一个阴影在最上面)。

纯css是静态的不可能实现渐变什么的,必须用JavaScript或jQuery之类的 我用jQuery http://www.phpstudy.net/e/tiy/ii.php?q=jquery_effect_toggle_function 这是w3c的那个实例,我也做过现在找不

/* x偏移量 | y偏移量 | 阴影颜色 */box-shadow:60px -16px teal;/* x偏移量 | y偏移量 | 阴影模糊半径 | 阴影颜色 */box-shadow: 10px 5px 5px black;/* x偏移量 | y偏移量 | 阴影模糊半径 | 阴影扩散半径 | 阴影颜色 */box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);/* 插页(阴影向内) | x偏移量 | y偏移量 | 阴影颜色 */box-shadow: inset 5em 1em gold;/* 任意数量的阴影,以逗号分隔 */box-shadow: 3px 3px red, -1em 0 0.4em olive;/* 全局关键字 */box-shadow: inherit;box-shadow: initial;box-shadow: unset;

1.frameset是框架,iframe是内嵌网页。2.看看下面的结果是不是你想要的: 把这几个文件放在同一个文件夹下就可以看到效果了 a.htm: 这是A页面 b.htm: 这是B页面 c.htm: 此网页

指定单个 box-shadow 的用法: 给出两个、三个或四个数字值的情况。 如果只给出两个值, 这两个值将被浏览器解释为x轴上的偏移量 <offset-x> 和y轴上的偏移量 <offset-y>。 如果给出了第三个值, 这第三个值将被解释为模糊半径的大小 <blur-radius>。 如果给出了第四个值, 这第四个值将被解释为扩展半径的大小 <spread-radius>。 可选, 插页(阴影向内) inset。 可选, 颜色值 <color>。 声明多个shadows时, 用逗号将shadows隔开。

outline

CSS的outline属性是用来设置一个或多个单独的轮廓属性的简写属性 , 例如 outline-style, outline-width 和 outline-color。 多数情况下,简写属性更加可取和便捷。

轮廓与边框在以下几个方面存在不同: 轮廓不占据空间,它们被描绘于内容之上; 轮廓可以是非矩形的。在Gecko/Firefox中,轮廓是矩形的,但是Opera则会围绕元素结构绘制非矩形的形状;

/* 宽度 | 样式 | 颜色 */outline: 1px solid white;

outline-offset :用于设置 outline 与一个元素边缘或边框之间的间隙。

outline是元素的轮廓,悬浮在元素边框之上。元素和其轮廓之间是透明的。也就是说,它们之间的颜色会继承父元素的背景色。

/* <length> values */outline-offset: 3px;outline-offset: 0.2em;/* Global values */outline-offset: inherit;outline-offset: initial;outline-offset: unset;

简单的border无法实现图上效果,可以多重嵌套css来实现,代码如下height:200px;padding:20px;position:relative;height:10px;position:absolute;left:0px;top:0px;border:1px solid#ccc;border-bottom:none;border-right:none;height:10px;position:absolute;right:0px;top:0px;border:1px solid#ccc;border-left:none;border-bottom:none;height:180px;内容来自www.zgxue.com请勿采集。


  • 本文相关:
  • css3 边框效果
  • css效果之边框内圆角
  • css3实现六边形边框的实例代码
  • 纯css实现动态边框的示例代码
  • 基于css 属性实现按钮悬停边框和背景动画集合
  • css实现虚线边框滚动效果的实例代码
  • css边框长度控制功能的实现
  • 求教css样式、如图,图片左右上角的是边框样式吗,该怎样实现这个功能、、、
  • css3有哪些新特性 包含哪些模块
  • html中框架(frame)的详细使用方法
  • 用java中的(for循环)打印如下三角形图形: ***** **** *** ** *
  • css3边框阴影border-shadow有什么作用?
  • css 怎么设置背景图片的重复次数
  • ug编程固定轮廓铣中区域铣削往复如何改下刀点
  • 如何CSS实现网页背景三种颜色渐变效果?
  • javascript
  • 6.1新画质特效详解:抗锯齿到底哪个好
  • 网站首页网页制作脚本下载服务器操作系统网站运营平面设计媒体动画电脑基础硬件教程网络安全主页网页制作csscss教程多重边框css基于css 属性实现按钮悬停边框和背景动画集合css边框长度控制功能的实现css教程css3div+css教程web标准教程浏览器兼容教程css布局实例css控制ul li 的样式详解(推荐)html设置超链接字体颜色和点击后的字体颜色div水平垂直居中的完美解决方案css设置各种中文字体如雅黑、黑体、宋体、楷体等等css 文本字体颜色设置方法(css color)css 漂亮搜索框美化代码css自定义select下拉选择框的样式(不用其他标签模拟)css圆角效果 -webkit-border-radius(css3中border-radcss 中的background:transparent到底是什么意思有什么css 首行缩进两个文字css 实现渐变效果小结( linear-gradient线性渐变 和 r解决type=file 文件修改表单 名称不能正常回显的问题移动端前端适配方案(总结)css 横向进度条和竖向进度条实现代码css运用阿里巴巴矢量库快速在对应位置加上好看的图标详解盒模型大小取决于它的padding,margin,border数css+svg实现b站充电效果的示例代码css动画实现领积分效果的思路详解html/css中的空格处理及如何保留页面中的空格css实现气泡的小尖角效果
    免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved