html div圆滑效果,美化网页div -让边框拥有阴影，边角变得圆滑

DIV边框过于单调？

来为你的DIV边框加上阴影吧，充实边框，美化页面必备

.main{

background-color: rgba(102, 146, 191, 0.44);

/*边框*/

border: solid 1px rgba(102, 146, 191, 0.68);

/*边角弧度*/

border-radius: 10px;

/*阴影*/

-moz-box-shadow:2px 2px 5px #333333;

-webkit-box-shadow:2px 2px 5px #333333;

box-shadow: 7px 15px 30px #285a63;

}

边框美化之后，发现直接显示阴影显得有点突兀，所以，可以考虑给页面加一个过渡效果哦

.main{

/*延迟过度*/

-moz-box-sizing:border-box; /* Firefox */

-webkit-box-sizing:border-box;

-o-box-sizing:border-box; /* Opera */

transition: all 0.3s linear;/*0.3s过渡时间*/

-moz-transition: all 0.3s linear; /* Firefox 4 */

-webkit-transition: all 0.3s linear; /* Safari 和 Chrome */

}

设置好了之后，当main修饰的标签发生改变时，就有0.3s的效果过渡时间。

有了过渡时间，那么我们就可以加上一个过渡，让特效展示出来啦

.main:hover{

/*边框*/

border: solid 1px rgba(102, 146, 191, 0.68);

/*边角弧度*/

border-radius: 10px;

box-shadow: 7px 15px 30px #285a63;

}

此时，悬停时，阴影特效就会加强，这里div的美化就成功了，大家看懂了没，有问题或不理解可以留言探讨哦。

美化后的div和背景色搭配起来简直完美哦，下面给大家附上背景色的修改链接

https://blog..net/qq_36120267/article/details/81705148

自己做起来可能不能立马看到效果，我这里也贴心的给大家成品页面看看效果哦

http://listar.top/vip

html div圆滑效果,美化网页div -让边框拥有阴影，边角变得圆滑相关推荐

美化网页div -让边框拥有阴影，边角变得圆滑
DIV边框过于单调? 来为你的DIV边框加上阴影吧,充实边框,美化页面必备 <style type="text/css"> .main{background-color ...
html div圆滑效果,Html-Css-设置DIV边框圆滑
这么几天需要做一个类似于层级展示的东西,最后一层需要做一些div框来展示数据,我用css设置了div的边框为圆角,但是添加背景色的时候颜色溢出,覆盖了四个角的圆弧,效果如图所示: css代码如下: . ...
美化网页背景 -让背景拥有斜线
页面背景色过于单调? 来为你的背景色加上斜线把,充实背景,美化页面必备 <style type="text/css"> body{background-color: r ...
jquery div拖动效果示例代码
jquery div拖动效果示例代码 div拖动效果想必大家都有见到过吧,实现的方法也是有很多的,下面为大家将介绍使用jquery是如何实现的,感兴趣的朋友不要错过复制代码代码如下: <%@ ...
CSS系列之美化网页/span标签和div标签/字体样式/文本样式
CSS系列之美化网页/span标签和div标签/字体样式/文本样式 01 span标签和div标签 span标签的作用能让几个文字或者某个词语凸显出来属于行内元素 div标签属于块级元素程序示 ...
《Div+CSS 3.0网页布局案例精粹》扫描版[PDF]
电驴资源下面是用户共享的文件列表,安装电驴后,您可以点击这些文件名进行下载 [Div.CSS.3.0网页布局案例精粹].王大远.扫描版.rar详情 53.7MB 全选 53.7MB 下载地址(拷贝到 ...
php div中的字上下居中,Div垂直居中效果怎么实现
本篇文章主要给大家介绍实现div垂直方向居中的方法. 网页设计中div各种居中布局,是html/css初学者们最为基础且需要掌握的知识技能.div水平居中效果我们在之前的文章中有为大家介绍过,想必新手 ...
div 隐藏_CSS实现六边形Div图片展示效果
一. 效果图二. 六边形效果涉及到的知识点 1. transform: rotate(120deg); // 元素旋转 2. overflow: hidden; // 超出隐藏 3. visibil ...
php div 居中代码,Div水平居中效果怎么实现
本篇文章主要给大家介绍实现div水平居中的具体方法. 对于html/css的初学者来说,实现div各种居中(如水平居中,垂直居中等)的办法,想必大家也都有所了解,毕竟优秀的div排版是制作网页页面的基 ...

html div圆滑效果,美化网页div -让边框拥有阴影，边角变得圆滑

html div圆滑效果,美化网页div -让边框拥有阴影，边角变得圆滑相关推荐

最新文章

热门文章