css3级菜单怎么设置_安全

1boder-radis圆角的制作

2linear-gradient渐变背景的制作

3box-shadow阴影效果的制作

4transition转换效果的制作

5transparent透明效果

6CCS3中before的作用

实现的效果图如下：

搭建HTML容器

一级菜单ul的样式修饰：

设置一级菜单的宽度、整体居中显示、用border设置颜色为#222的1像素宽的边框、用background-color设置背景颜色为#111、用background-image和linear-gradient设置背景为#444和#111的渐变效果、用border-radius设置圆角边框为6px、用before和after的方式给一级ul填充内容是清除二级浮动的一种方式保证背景能够包裹所有ul内的元素

top-nav{width:969px;margin:60px auto;border:1px solid #222;background-color:#111; background-image:linear-gradient(#444,#111);border-radius:6px;box-shadow:0 1px 1px #777; padding:0;list-style:none;} top-nav:before,top-nav:after{content: "";display: table;} top-nav:after{clear: both;}

一级菜单内li的样式修饰：

用float将所有的li左浮动、用boder-right给每一个li制作一个左边框效果、用box-shadow制作阴影效果、position：relative是为了下面二级菜单的显示二级菜单会以absolute的方式定位

top-nav li{float: left;border-right:1px solid #222;box-shadow:1px 0 0 #444;position: relative;}

一级菜单内li中a元素以及鼠标移动到a元素上之后的样式修饰

这些属性比较简单，就不作一一介绍了

top-nav li a{float:left;text-decoration: none;padding:12px 30px;font-size:12px;font-weight:bold;text-shadow: 0 2px 0 #000;color: #999;} top-nav li a:hover{color: #fafafa;}

二级菜单ul的样式修饰

二级菜单默认是隐藏状态，用绝对定位的方式（相对于一级菜单）将二级菜单定位在top:38px;left:0;的位置上、同样给二级菜单设置渐变背景色和阴影的效果box-shadow中的rgba属性可以制作透明度的效果、用opacity这是透明级别为0、用transition制作一个过度显示和隐藏的效果

top-nav li ul{visibility: hidden;position: absolute;list-style: none;top:38px;left: 0;z-index: 1;padding: 0; background-color: #444;background-image: linear-gradient(#444,#111);box-shadow: 0 -1px 0 rgba(255,255,255,3);border-radius: 3px;opacity: 0;margin: 20px 0 0 0;transition: all 2s ease-in-out; }

当鼠标移动到一级菜单栏的时候二级菜单栏显示

hover属性的应用

top-nav li:hover > ul{opacity: 1;visibility: visible;margin: 0;}

设置二级菜单li和a的样式

方法和一级菜单的li和a的修饰差不多，不做过多的解释

top-nav ul li{float: none;display: block;border: 0;box-shadow: 0 1px 0 #111,0 2px 0 #666;} top-nav ul a{padding: 10px;width: 130px;display: block;float: none;} top-nav ul a:hover{background-color: #0186ba;background-image: linear-gradient(#04acec,#0186ba);} top-nav ul li:first-child > a{border-radius: 3px 3px 0 0;} top-nav ul li:last-child > a{border-radius: 0 0 3px 3px;}

三角形的制作

用css3制作三角形的的方法就是四边设置同样宽度的border，将要保留的那一边的border设置颜色，其他三边的颜色设置为透明(transparent)，则保留颜色的那一边的三角形就制作出来了

top-nav ul li:first-child > a:before{ content: "";position: absolute;left:40px;top: -6px; display: block;width: 0;border-bottom: 6px solid #444;border-left: 6px solid transparent; border-right: 6px solid transparent; } top-nav ul li:first-child > a:hover:before{border-bottom-color:#04acec; }

三级菜单位置的变换

将三级菜单定位到二级菜单的右边显示

top-nav ul ul{top:0;left: 150px;margin: 0 0 0 20px;box-shadow: -1px 0 0 rgba(255,255,255,3);} top-nav ul ul li:first-child a:before{left: -6px;top: 50%;margin-top: -6px;border-left: 0;border-bottom: 6px solid transparent; border-top: 6px solid transparent;border-right: 6px solid #3b3b3b;} top-nav ul ul li:first-child a:hover:before{border-right-color:#0299d3;border-bottom-color:transparent;}

完整代码(其中有针对IE6的兼容性处理)

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <!--<script src=">

不同浏览器使用的内核不同，导致对渐变的代码写法也不同。

一、Webkit

又称Safari内核,Chrome内核原型,。它是苹果公司自己的内核，也是苹果的Safari浏览器使用的内核。360急速浏览器，QQ浏览器、搜狗浏览器用的是Webkit内核。
尽管Mozilla和Webkit通常对css3属性采取同样的语法，但是对于渐变，他们很不幸的不能达成一致。Webkit是第一个支持渐变的浏览器内核，它使用下面的结构：

/ 语法，参考自: >

不要担心这些语法会让你看花眼，我也是这样的！只要记得我们需要用一个逗号来隔开这个参数组。

渐变的类型 (linear)

渐变开始的X Y 轴坐标(0 0 – 或者left-top)

渐变结束的X Y 轴坐标(0 100% 或者left-bottom)

开始的颜色 (from(red))

结束的颜色 (to(blue))

Mozilla浏览器

Mozilla Firefox（正式缩写为 Fx，非正式缩写为FF），中文名为火狐，是由Mozilla基金会（谋智网络）与开源团体共同开发的网页浏览器。

Firefox，从36版本才开始支持渐变，更喜欢和Webkit略微不同的语法。

/ 语法，参考自: >

请注意我们将渐变的类型——linear——放到了属性前缀中了

渐变从哪里开始 (top – 我们也可以使用度数，比如-45deg)

开始的颜色 (red)

结束的颜色 (blue)

Color-Stops

如果你不需要从一个颜色到另一个颜色的100%渐变怎么办？这就是color stop起作用的时候了。一个普遍的设计技术是使用一个较短而细微的渐变，比如：

注意顶部的浅灰色到白色的细小的渐变

在过去，标准的做法就是制作一个，并将其设为一个元素的背景，然后让其水平平铺。然而使用CSS3，这是个小Case。

1、 background: white; / 为较旧的或者不支持的浏览器设置备用属性 /
2、background: -moz-linear-gradient(top, #dedede, white 8%);
3、background: -webkit-gradient(linear, 0 0, 0 8%, from(#dedede), to(white));
4、border-top: 1px solid white;

这次，我们让渐变结束于8%，而不是默认的100%。请注意我们也在头部采用了一个边框，以形成对比。这很常用。

如果我们想要添加多一种(几种)颜色，我们可以这样做：

1、 background: white; / 备用属性 /
2、background: -moz-linear-gradient(top, #dedede, white 8%, red 20%);
3、background: -webkit-gradient(linear, 0 0, 0 100%, from(#dedede), color-stop(8%, white), color-stop(20%, red);

对于-moz 版本，我们定义，从元素的20%的高度的地方开始是红色。

而对于-webkit，我们使用color-stop，采用两个参数：哪里开始停止，使用哪种颜色。

三、IE

IE并不支持CSS渐变，但是提供了渐变滤镜，可以实现最简单的渐变效果：

1、 filter: progid:DXImageTransformMicrosoftgradient(startColorstr='#ffffff', endColorstr='#ff0000'); / IE6,IE7 /
2、-ms-filter: "progid:DXImageTransformMicrosoftgradient(startColorstr='#ffffff', endColorstr='#ff0000')"; / IE8 /

PS：事实上，我们在《RGBa色彩的浏览器支持》提到的IE的解决方法，就是使用这个渐变滤镜。

关于CSS渐变的一些要点：

尽可能的使用它。如果让IE用户看到一个固定的纯色，我鼓励你使用这种方法；

IE6/7/8, Opera, Safari 3, 和Firefox 3 不能渲染CSS3 渐变，Firefox 和Safari用户通常经常升级浏览器，而Chrome的自动升级机制会在后台自动升级，所以这并不是个大问题；

总是为不支持这些浏览器私有属性的浏览器应用一个默认的，纯色背景；

永远不要使用红色到蓝色的渐变，就像我用作例子的这种；

页面无须在每个浏览器里面看起来完全一样！

Firefox可以使用角度来设定渐变的方向，而webkit只能使用x和y轴的坐标。

渐变可以创建类似于彩虹的效果，低版本的浏览器不的不使开发者用来实现，CSS3将会轻松实现网页渐变效果。

要得上面的线性渐变效果，我们这样去定义CSS3样式：

background-image: -moz-linear-gradient(top, #8fa1ff, #3757fa); / Firefox /
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ff4f02), color-stop(1, #8f2c00)); / Saf4+, Chrome /
filter: progid:DXImageTransformMicrosoftgradient(startColorstr='#c6ff00', endColorstr='#538300', GradientType='0'); / IE/

-moz-linear-gradient有三个参数。第一个参数表示线性渐变的

看下面这种简单的理解

一 Webkit浏览器

(1) 第一种写法：

background:-webkit-gradient(linear ,10% 10%，100% 100%，

color-stop(014,rgb(255,0,0)),

color-stop(05,rgb(255,255,0)),

color-stop(1,rgb(0,0,255)) );

第一个参数：表示的是渐变的类型

linear线性渐变

第二个参数：分别对应x，y方向渐变的起始位置

第三个参数：分别对应x，y方向渐变的终止位置

第四/五/N个参数：设置渐变的位置及颜色

(2)第二种写法：这种写法比较简单，而且效果比较自然

background:-webkit-gradient(linear, 0 0, 0 100%, from(＃2074af), to(＃2c91d2));

第一个参数：表示的是渐变的类型

linear线性渐变

第二个参数：分别对应x，y方向渐变的起始位置

第三个参数：分别对应x，y方向渐变的终止位置

第四个参数：设置了起始位置的颜色

第五个参数：设置了终止位置的颜色

二Mozilla浏览器

(1)第一种写法：

background:-moz-linear-gradient(10 10 90deg,

rgb(25,0,0) 14%,

rgb(255,255,0) 50%,

rgb(0,0,255) 100%);

第一个参数：设置渐变起始位置及角度

第二/三/四/N个参数：设置渐变的颜色和位置

(2)第二种写法：这种写法比较简单，而且效果比较自然

background:-moz-linear-gradient(top, ＃FFC3C8,＃FF9298);

第一个参数：设置渐变的起始位置

第二个参数：设置起始位置的颜色

第三个参数：设置终止位置的颜色

三IE 浏览器

IE浏览器实现渐变只能使用IE自己的滤镜去实现

filter:progid:DXImageTransformMicrosoftgradient(startColorstr=＃00ffff,endColorstr=＃9fffff,grandientType=1);

第一个参数：渐变起始位置的颜色

第二个参数：渐变终止位置的颜色

第三个参数：渐变的类型

0 代表竖向渐变 1 代表横向渐变

PS这里设置背景的时候不需要给background设置，直接用filter即可，不要和其他的浏览器混淆

参考：

><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
demo{
width:200px;
height:10px;
background:-webkit-linear-gradient(left, rgb(80,80,255,02) , #fff) / Safari 51 - 60 /
background: -o-linear-gradient(left, rgb(80,80,255,02) , #fff); / Opera 111 - 120 /
background: -moz-linear-gradient(left, rgb(80,80,255,02) , #fff); / Firefox 36 - 15 /
background: linear-gradient(to left, rgb(80,80,255,02) , #fff); / 标准的语法 /
}
</style>
</head>
<body>
<div class="demo" ></div>
</body>
</html>

用css3可以直接用作为背景就可以了，不需要用js。解决方法如下：

1、双击打开HBuilderX开发工具，在Web项目中新建静态页面canvashtml。

2、打开已新建的canvashtml文件，修改title标签里的文字内容。

3、在<body></body>标签内，插入一个canvas标签，并设置id属性值。

4、在canvas标签下，添加script标签并初始化canvas对象，调用自带的方法。

5、保存代码并运行项目，打开浏览器查看界面效果，可以发现绘制了一条线。

6、在style标签中，利用ID选择器设置canvas样式，添加背景色设置。

7、再次保存代码文件，并刷新浏览器，可以看到canvas画布背景色发生了改变。

在一个id为bt1的按钮上设置样式，如下：

#bt1{

font-family:微软雅黑 ;    width: 60px ;             
height:30px ;             
font-size:14px;           
color:gray;               
border: 1px solid red； 
margin-left: 10px;            
background-color:#F1F1F1;        
box-shadow:10px 10px 10px gray;  
border-radius:10px 10px 10px 10px;
cursor:pointer;

}

1、打开WORD软件，在菜单，点击“页面布局”-“页面边框”，如图：2、出现页面边框对话框，可以对边框进行设置“有”或“无”。有的的形式，还有横线的式样。如果选择方框为有，在右边就马上看到设置后效果，如图：3、还可以通过表格工具调整边框大小。在“样式”这里可以对线的“样式”，“颜色”，线的“宽度”进行设置。

左右有半截高度边框，这个只有2个办法：

不用边框，边线做成背景图

输入框无边框，背景设为透明，弄个跟输入框一半高度的div，用定位重叠在输入框下面，div左右下三条边设置为灰色

欢迎分享，转载请注明来源：内存溢出

原文地址: https://outofmemory.cn/yw/13400627.html

css3级菜单怎么设置

发表评论

评论列表（0条）