这 66 个特效，是我历时4个多月在油管一个一个跟着敲出来的，为了加强记忆，每个练习，我都录制了视频，在这里分享出来给大家。大家可能又会调侃了，你是工作不饱和吧，有时间做这些。其实，我目前工作还是挺饱和的，都是挤出来的。我们是9点上班，我基本7点半就到公司自学了，这样我就有一个半小时的时间来做这些了。对于 CSS 评价，无论是在论坛还是身边的人，我听到最多的是学 CSS 这些花里胡哨没啥用，实际项目中又用不到。听到这些心里还是挺实受挫的，有时候会怀疑自己，我学习的方向是不是错了。但在几次的项目需要用到一些特效，我都能很快的找到思路并做出来，我想这是得益于，我平时所学的这些特效积累出来的。现在我不在困惑我所学的东西，因为学习成长是你自己事情，而不是别人在意的眼光。这个系列我会一直学习下去，第一季 66 节课，已经更完毕，所有的源码都在下面的地址：https://blog.csdn.net/qq449245884/category_9873715.html这个需要2瓶快乐水的钱，毕竟整理这些还是挺幸苦的， 有兴趣的可以自己看看。01.波浪文本动画效果视频地址1：https://www.ixigua.com/i6807702906041532939/视频地址2：https://www.bilibili.com/video/BV1Y7411m7b602.涟漪动画效果视频地址一：https://www.ixigua.com/i6807982622866670083/视频地址一：https://www.bilibili.com/video/BV1V741117Gm/03.视频字幕悬停特效效果视频地址一：https://www.bilibili.com/video/BV1f7411Q7JD/视频地址二：https://www.ixigua.com/i6809102422514860548/04-新拟物单选按钮效果效果视频地址一：https://www.ixigua.com/i6809529914975322632/视频地址二：https://www.bilibili.com/video/BV1Q7411D7LH/05-全屏视频背景滚动淡出效果视频地址一：https://www.bilibili.com/video/BV1nC4y1s7Dw/视频地址二：https://www.ixigua.com/i6809937347405152781/06-创意产品卡效果视频地址一：https://mp.toutiao.com/profile_v3/xigua/content-manage视频地址二：https://www.bilibili.com/video/BV1mt4y1m7Nw/07.创意菜单项悬停特效效果视频地址一：https://www.bilibili.com/video/BV1za4y1t73c/视频地址二：https://www.ixigua.com/i6812147372131353091/08.怎么配合视频做好 CSS 特效效果视频地址一：https://www.ixigua.com/i6812840842902897164/视频地址二：https://www.bilibili.com/video/BV1Le41147w9/09.制作有个性的滚动条视频地址一：https://www.bilibili.com/video/BV17e41147Gr/视频地址二：https://www.ixigua.com/i6813181916829712908/10.BoxShadow 初级到高级特效效果视频地址一：https://www.bilibili.com/video/BV1YC4y1s7kG/视频地址一：https://www.ixigua.com/i6814296955070448135/11.仅使用CSS对任何SVG图标进行动画处理效果视频地址一：https://www.bilibili.com/video/BV1AA411b7tA/视频地址二：https://www.ixigua.com/i6814028560034955780/12.使用 CSS3 实现响应式推荐卡片效果视频地址一：https://www.bilibili.com/video/BV1YC4y1s7kG/视频地址一：https://www.ixigua.com/i6814703631879635467/13.新拟物炫酷时钟效果视频地址一：https://www.bilibili.com/video/BV1pQ4y1K76g/视频地址一：https://www.ixigua.com/i6815132991329665539/14.使用 CSS Grid 实现瀑布流布局效果视频地址一：https://www.ixigua.com/i6815506102424175116/15.2.5D视差效应视频地址一：https://www.bilibili.com/video/BV1mT4y1G7cY/视频地址二：https://www.ixigua.com/i6815871539683000835/16.纯CSS3水波动画特效效果视频地址：https://www.ixigua.com/i6816244424448672260/17.圆形进度条效果视频地址一：https://www.bilibili.com/video/BV1qp4y1X7Jz/视频地址二：https://www.ixigua.com/i6816614062399422980/18.3D透视图与分层图像悬停效果效果视频地址一：https://www.bilibili.com/video/BV1J64y1T7XV/视频地址二：https://www.ixigua.com/i6817737160876098056/19.显示隐藏密码框效果视频地址一：https://www.bilibili.com/video/BV1UQ4y1K7oz/视频地址二：https://www.ixigua.com/i6818096482898412036/20.立体卡片展示特效效果视频地址一：https://www.bilibili.com/video/BV1ce411s7AG/视频地址二：https://www.ixigua.com/i6818471295219401219/21.按钮悬停特效效果视频地址：https://www.ixigua.com/i6818851166034592267/22.文字肖像和鼠标移动视差效果效果：视频地址一：https://www.bilibili.com/video/BV1TV411d7F6/视频地址二：https://www.ixigua.com/i6819215565555499532/23.输入框验证特效效果：视频地址一：https://www.bilibili.com/video/BV1Ak4y1k7Dm/视频地址二：https://www.ixigua.com/i6820325547432739339/24.粘性导航特效效果：视频地址一：https://www.bilibili.com/video/BV15K411577L/视频地址二：https://www.ixigua.com/i6821071022444249611/25.有趣的子弹声特效效果：视频演示地址一：https://www.bilibili.com/video/BV1C54y1Q7hd/视频演示地址二：https://www.ixigua.com/i6821449649967071748/26.渐变发光卡片效果：视频地址一：https://www.bilibili.com/video/BV1Qf4y1m7BY/视频地址二：https://www.ixigua.com/i6822923946040492556/27.实现长阴影网页特效效果：视频地址一：https://www.bilibili.com/video/BV1uA411t78K/视频地址二：https://www.ixigua.com/i6823670426938376716/28.发光复选框特效效果：视频地址一：https://www.bilibili.com/video/BV1qz411z7Eq/视频地址二：https://www.ixigua.com/i6824042494213227012/29. 酷炫 Loading 特效效果：视频地址一：https://www.bilibili.com/video/BV1dK411W7De/视频地址二：https://www.ixigua.com/i6825524219757986318/30.鼠标移动多彩心网页特效效果：视频地址一：https://www.bilibili.com/video/BV1de411p7gc/视频地址二：https://www.ixigua.com/i6825893346527937038/31.实现定价卡悬停特效效果：视频地址一：https://www.bilibili.com/video/BV1mK411W7pG/视频地址二：https://www.ixigua.com/i6826645569625129484/32. 3D 翻转卡片特效效果：视频地址一：https://www.bilibili.com/video/BV13K4y1t7zh视频地址二：https://www.ixigua.com/i6827005668893917708/33.视频滑块特效效果：视频地址一：https://www.bilibili.com/video/BV1Bk4y1k7QY视频地址二：https://www.ixigua.com/i6828124892492202500/34.像素化图像悬停特效效果：视频地址一：https://www.bilibili.com/video/BV1ta4y1e7WP视频地址二：https://www.ixigua.com/i6828497506532327939/35.按钮悬停效霓虹灯特效效果：视频地址一：https://www.bilibili.com/video/BV11z4y1R74N视频地址二：https://www.ixigua.com/i6828857444907614723/36.笑脸评分栏特效效果：视频地址一：https://www.bilibili.com/video/BV1Pt4y1y7K2/视频地址一：https://www.ixigua.com/i6829582434183414283/37.鼠标移动线条特效效果：视频地址一：https://www.bilibili.com/video/BV1ag4y1i7E9/视频地址二：https://www.ixigua.com/i6830722031856648707/38.鼠标移动炫酷特效效果视频演示地址一：https://www.bilibili.com/video/BV1Xz411v7X9/视频演示地址二：https://www.ixigua.com/i6831832169350955531/39.粘滞滚动特效效果：视频地址一：https://www.bilibili.com/video/BV1r54y1D7Tk/视频地址二：https://www.ixigua.com/i6832204729552994819/40.新拟物 checkbox 特效效果：视频地址一：https://www.bilibili.com/video/BV1iV411r7SD/视频地址二：https://www.ixigua.com/i6833316731788722701/41.clip-path 滚动特效效果视频地址一：https://www.bilibili.com/video/BV1tQ4y1P7DW/视频地址二：https://www.ixigua.com/i6833685696041976323/42.波浪div动画效果效果视频地址：https://www.ixigua.com/i6834042168265409027/43.滚动倾斜的背景特效效果视频地址一：https://www.bilibili.com/video/BV17p4y1D7UA/视频地址二：https://www.ixigua.com/i6834441977069568525/44.计数器设计思路效果：视频地址一：https://www.bilibili.com/video/BV1vQ4y1P7SW/视频地址二：https://www.ixigua.com/i6835920426430890499/45.菜单悬停滑动特效效果：视频地址一：https://www.bilibili.com/video/BV1Sp4y1S7y7/视频地址二 ：https://www.ixigua.com/i6836281379467035147/46.很棒的图标悬停特效效果：视频地址一：https://www.bilibili.com/video/BV1ef4y127k5/视频地址二： https://www.ixigua.com/i6836657427052495373/47.霓虹灯按钮动画效果的悬停效果：视频地址一：https://www.bilibili.com/video/BV15k4y1z7gW/视频地址二：https://www.bilibili.com/video/BV15k4y1z7gW/48.窗帘响应菜单特效效果：视频地址一：https://www.bilibili.com/video/BV1TT4y1J7qf/视频地址二：https://www.ixigua.com/i6838419811442098700/49.新拟物按钮悬停效果效果：视频地址一：https://www.bilibili.com/video/BV1fv411q7AT/视频地址二：https://www.ixigua.com/i6838884535929668107/50.新拟物卡片悬停特效效果：视频地址一：https://www.bilibili.com/video/BV1Df4y1y7am/视频地址二：https://www.ixigua.com/i6839252135687750156/51.3D图像翻转特效效果：视频地址一：https://www.ixigua.com/i6840006472894513676/视频地址二：https://www.bilibili.com/video/BV15A411i7dU/52.响应式剪贴蒙版视差滚动效果效果：视频地址一：https://www.ixigua.com/i6841112747518722568/视频地址二：https://www.bilibili.com/video/BV1hv411677o/53.网站夜间日间特效效果：视频地址一：https://www.ixigua.com/i6841112747518722568/视频地址二：https://www.bilibili.com/video/BV1pa4y1Y7n9/54.文本旋转动画效果效果：视频地址一：https://www.ixigua.com/i6841854545706877447/视频地址二：https://www.bilibili.com/video/BV1iC4y1a7wW/55.创意按钮悬停特效效果：视频地址一：https://mp.toutiao.com/profile_v3/xigua/content-manage视频地址二：https://www.bilibili.com/video/BV1ZK411n7v7/56.3D编辑文本特效效果：视频地址一：https://www.ixigua.com/i6843709475413557764/视频地址二：https://www.bilibili.com/video/BV1oi4y1G7xz/57.响应盒模型特效效果：58.数字时钟特效效果：视频地址一：https://www.ixigua.com/i6844451067896267278/视频地址二：https://www.bilibili.com/video/BV1bp4y1U7fS/59.弹出框与模糊的背景特效效果视频地址一：https://www.ixigua.com/i6845126624082395656/视频地址二：https://www.bilibili.com/video/BV1bA411i75h/60.如何在文字内放置视频效果视频地址一：https://www.ixigua.com/6846310483146998275/视频地址二：https://www.bilibili.com/video/BV1B5411Y7A5/61.反射属性-webkit-box-reflect应用效果视频地址一：https://www.ixigua.com/6847050168638898692/视频地址二：https://www.bilibili.com/video/BV1iA411e7Dr/62.渐变发光加载动画特效效果63.全屏加载页面动画特效效果视频地址一：https://www.ixigua.com/6848908900436017676/视频地址二：https://www.bilibili.com/video/BV1zK4y1s7it/64.圣诞节动画特效效果视频地址一：https://www.ixigua.com/6849270738138956299/视频地址二：https://www.bilibili.com/video/BV1g5411e7yQ/65.粘糊糊的动画效果效果视频地址一：https://www.ixigua.com/6850016080396714499/视频地址二：https://www.bilibili.com/video/BV1wK4y1x7BY/66.电视噪音动画特效效果视频地址一：https://www.ixigua.com/6850386816432865806/视频地址二：https://www.bilibili.com/video/BV1Jv411q7oh/人才们的 【三连】 就是小智不断分享的最大动力，如果本篇博客有任何错误和建议，欢迎人才们留言，最后，谢谢大家的观看。所有特效源码：https://blog.csdn.net/qq449245884/category_9873715.html————————————————版权声明：本文为CSDN博主「前端小智@大迁世界」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。原文链接：https://blog.csdn.net/qq449245884/java/article/details/107461626

今天在做一个登录界面的时候，由于视觉给的页面背景图片太鲜艳亮眼，导致页面中间的登录表单框很不显眼，效果很差。就想到了做成毛玻璃的效果，现在分享出来，大家一起看看吧。页面结构如下：1234<p class="wrap-box"><!--最外层包裹框，背景图片很鲜艳亮眼position:fixed-->    <p class='login-box'><!--登录表单框部分position:fixed-->        </p></p>由于之前用过CSS filter属性，在属性值中使用blur(<blur_size>)函数可以起到毛玻璃效果，所以我有2个思路来实现突出登录表单框的效果：对wrap-box使用filter:blur(<blur_size>);，然后将login-box的z-index设置为比父元素大使之浮在上层，使页面中除了登录表单框部分都是模糊的。Exciting!这种方法似乎可行，但是效果却不是所期望的，login-box也被模糊了！原因如下：应用了filter:blur(<blur_size>);的元素的所有子孙元素都会被模糊处理（不是因为继承），即使子孙元素脱离了该元素的文档流也不能避免。只对login-box背后部分模糊处理。解决方案是在login-box下层加一个与之重叠的元素，对此元素应用filter:blur(<blur_size>);，可以选择用伪元素：12345678910.login-box::before{    content:'';    position:absolute;    top:0;    left:0;    right:0;    bottom:0;    filter:blur(10px) contrast(.8);    z-index:-1;}并设置如下背景样式：123.wrap-box ,.login-box::before{    background:url('/assets/login_bg.jpg') 0 / cover fixed;}效果达成如下：感谢大家的阅读，希望大家收益多多。本文转自： https://blog.csdn.net/buttonChan/article/details/79889372推荐教程：《CSS教程》以上就是手把手教你CSS如何实现毛玻璃效果的详细内容

css常用属性border-left:1 px solid#6699c;/*左框线*/ border-right:1 px solid#6699cc;/*右框线* 以上是建议书写方式,但也可以使用常规的方式如下: border-top-color:#369/*设置上框线top颜色* border- top-width:1p×/*设置上框线top宽度* border-top-stye: solid/*设冒上框线top样式* 其他框线样式 sod/实线框* dotted/虚线框* double/*线框* groove/*立体内凸框* ridge/*立体浮雕框*/ set/*凹框* outset/*凸框* 七、CSS表单运用 文字方块 按钮 复选框 选择钮 多行文字方块 下拉式菜单选项1选项2 八、C5s边界样式 margIn-top:10px;/*上边界* margIn- right:10pX;/*右边界值* margIn- bottom:10px;/*下边界值* margIn-left:10px;/*左边界值*/ ...展开详情快速参考手册 css常用属性 css常用属性大全

一、边框1.1 border-radius 圆角1、border-radius的值可以为绝对单位px，和相对单位em，rem，也可以为百分比，值越大，弧度越大。 2、属性值位数不同时，表现也不同，具体可以参考图片。 3、你也可以设置单个角的弧度，比如border-top-right-radius:5px；border-bottom-left-radius:5px。1.2 box-shadow 阴影1、box-shadow: X轴偏移值 Y轴偏移值 X轴阴影模糊半径 Y轴阴影模糊半径 阴影颜色; 2、其中，X轴和Y轴的偏移值可以为负，但不能共用一个，X轴和Y轴的阴影半径可以共用一个，但是不能为负。 3、还需要注意的是，阴影模糊半径是可以不写的，比如box-shadow：10px 10px #ccc；这样，仍然会有阴影，但是就失去了这种模糊朦胧的效果，立体感也大大减弱了，一般不会这么使用。1.3 box-sizing 属性允许你以特定的方式定义匹配某个区域的特定元素，这话有点绕口，我们结合图来说明。box-sizing:content-box/border-box/inherit1盒模型基本结构如图，当我们设置了宽高，使用了box-sizing属性， 属性值为content-box时，宽高的值为content的宽高； 属性值为border-box时（事实上我们比较常用的就是这个），宽高的值为border+padding+content也就是整个盒模型的宽高； 属性值为inherit时，则从父元素继承box-sizing的值。二、背景CSS3中，我们对背景有了更强的控制2.1 background-image跟以前不同的是，我们通过background-image来为一个元素添加多张图片，让我们结合代码和效果图来看一下。<div class="box"></div>/*右下角的小图为bg_flower.gif*/.box{    height: 500px;    width: 800px;    margin: 0 auto;    margin-top: 100px;    background-image: url(img/bg_flower.gif), url(img/2.jpg);/*写在前面的背景图会在上面*/    background-position: right bottom, left top;/*默认为left top*/    background-repeat: no-repeat, repeat;/*默认为repeat*/}2.2 background-size 调整背景图片的大小属性值可以为实际单位，也可以是百分比。.box{    background-size:60px 100px;/*宽，高*/    background-size:60% 100%;2.3 background-origin 规定背景图片的定位区域background-origin: content-box / padding-box / border-box ; 下图中，绿色的是边框，黄色的是padding+content区域。<div class="box1"></div><div class="box2"></div><div class="box3"></div>div{    float:left;    margin:30px;    width: 120px;    height: 150px;    background: yellow;    border: 20px solid green;    padding: 20px;    background-image: url(img/bg_flower.gif);    background-repeat: no-repeat;}.box1{    background-origin:content-box;}.box2{    background-origin:padding-box;}.box3{    background-origin:border-box;}2.4 background-clip 规定背景的绘制区域background-clip: content-box / padding-box / border-box ;<div class="box1">啦啦啦啦，德玛西亚。啦啦啦啦，剑圣偷塔。啦啦啦啦，我要回家。啦啦啦啦，下雨不怕。啊啊！</div><div class="box2">啦啦啦啦，德玛西亚。啦啦啦啦，剑圣偷塔。啦啦啦啦，我要回家。啦啦啦啦，下雨不怕。啊啊！</div><div class="box3">啦啦啦啦，德玛西亚。啦啦啦啦，剑圣偷塔。啦啦啦啦，我要回家。啦啦啦啦，下雨不怕。啊啊！</div>div{    float:left;    margin:30px;    width: 120px;    height: 150px;    background: yellow;    border: 20px solid rgba(0, 0, 0, 0.1);    padding: 20px;}.box1{    background-clip:content-box;}.box2{    background-clip:padding-box;}.box3{    background-clip:border-box;}2.5 linear-gradient 背景的颜色渐变（IE10）CSS3 渐变（gradients）可以让你在两个或多个指定的颜色之间显示平稳的过渡。以前，你必须使用图像来实现这些效果。但是，通过使用 CSS3 渐变（gradients），你可以减少下载的事件和宽带的使用。此外，渐变效果的元素在放大时看起来效果更好，因为渐变（gradient）是由浏览器生成的。 其中颜色可以用多种表现形式，包括带有透明度的rgba()形式1） 线性渐变下面让我们来看代码<div class="box1"></div><div class="box2"></div><div class="box3"></div><div class="box4"></div><div class="box5"></div><div class="box6"></div>div{    float:left;    margin:30px;    width: 100px;    height: 150px;    border: 2px solid orange;    font-size: 14px;    line-height: 1.5;}.box1{/* 1、属性值最少为两种颜色 */        background: -webkit-linear-gradient(red, yellow); /* Safari 5.1 - 6.0 */        background: -o-linear-gradient(red, yellow); /* Opera 11.1 - 12.0 */        background: -moz-linear-gradient(red, yellow); /* Firefox 3.6 - 15 */        background: linear-gradient(red, yellow); /* 标准的语法 */}.box2{/* 2、可以设置颜色渐变的方向，比如从左到右 */        background: -webkit-linear-gradient(left, green , yellow);         background: -o-linear-gradient(left, green, yellow);         background: -moz-linear-gradient(left, green, yellow);         background: linear-gradient(left, green , yellow);}.box3{/* 3、也可以沿着对角的方向渐变 */        background: -webkit-linear-gradient(top left, blue , yellow);         background: -o-linear-gradient(top left, blue, yellow);         background: -moz-linear-gradient(top left, blue, yellow);         background: linear-gradient(top left, blue , yellow); }.box4{/* 4、或者，我们直接用角度确定渐变的方向（12点钟方向为0deg） */       background: -webkit-linear-gradient(60deg, rgb(248, 182, 44), rgb(0, 159, 233));        background: -o-linear-gradient(60deg, rgb(248, 182, 44), rgb(0, 159, 233));        background: -moz-linear-gradient(60deg, rgb(248, 182, 44), rgb(0, 159, 233));        background: linear-gradient(60deg, rgb(248, 182, 44), rgb(0, 159, 233)); }.box5{/* 5、我们也可以定义多种颜色的渐变，之前的方向的设置方法不变 */      background: -webkit-linear-gradient(45deg,red,orange,yellow,green,blue,indigo,violet);      background: -o-linear-gradient(45deg,red,orange,yellow,green,blue,indigo,violet);      background: -moz-linear-gradient(45deg,red,orange,yellow,green,blue,indigo,violet);      background: linear-gradient(45deg, red,orange,yellow,green,blue,indigo,violet); }.box6{/* 6、当然，渐变可以是很多次的 */      background: -webkit-repeating-linear-gradient(red, red 10%, yellow 20%);       background: -o-repeating-linear-gradient(red, red 10%, yellow 20%);      background: -moz-repeating-linear-gradient(red, red 10%, yellow 20%);       background: repeating-linear-gradient(red, red 10%, yellow 20%); }2）、径向渐变创建一个径向渐变，你也必须至少定义两种颜色结点。颜色结点即你想要呈现平稳过渡的颜色。同时，你也可以指定渐变的中心、形状（原型或椭圆形）、大小。默认情况下，渐变的中心是 center（表示在中心点），渐变的形状是 ellipse（表示椭圆形），渐变的大小是 farthest-corner（表示到最远的角落）。下面上代码<div class="box1"></div><div class="box2"></div><div class="box3"></div><div class="box4"></div><div class="box5"></div>div{    float:left;    margin:30px;    width: 150px;    height: 150px;    border: 2px solid orange;    font-size: 14px;    line-height: 1.5;}.box1{/* 1、颜色结点均匀分布（默认情况下 */    background: -webkit-radial-gradient(red, yellow, green); /* Safari 5.1 - 6.0 */    background: -o-radial-gradient(red, yellow, green); /* Opera 11.6 - 12.0 */    background: -moz-radial-gradient(red, yellow, green); /* Firefox 3.6 - 15 */    background: radial-gradient(red, yellow, green); /* 标准的语法 */            }.box2{/* 2、当然，对于颜色发辐射界限，我们也可以进行设置 */    background: -webkit-radial-gradient(red 5%, yellow 15%, green 60%);     background: -o-radial-gradient(red 5%, yellow 15%, green 60%);     background: -moz-radial-gradient(red 5%, yellow 15%, green 60%);     background: radial-gradient(red 5%, yellow 15%, green 60%); }.box3{/* 3、shape 参数定义了形状。它可以是值 circle 或 ellipse。其中，circle 表示圆形，ellipse 表示椭圆形。            默认值是 ellipse。*/    background: -webkit-radial-gradient(circle, red, yellow, green);     background: -o-radial-gradient(circle, red, yellow, green);     background: -moz-radial-gradient(circle, red, yellow, green);     background: radial-gradient(circle, red, yellow, green);             }.box4{/* 4、size 参数定义了渐变的大小。它可以是以下四个值：closest-side farthest-side closest-corner                 farthest-corner，具体的不同大家可以自己尝试，这里只展示一种情况 */    background: -webkit-radial-gradient(60% 55%, closest-side,blue,green,yellow,black);     background: -o-radial-gradient(60% 55%, closest-side,blue,green,yellow,black);    background: -moz-radial-gradient(60% 55%, closest-side,blue,green,yellow,black);    background: radial-gradient(60% 55%, closest-side,blue,green,yellow,black);}.box5{/* 5、当然，也是有重复渐变这种情况*/    background: -webkit-repeating-radial-gradient(red, yellow 10%, green 15%);    background: -o-repeating-radial-gradient(red, yellow 10%, green 15%);    background: -moz-repeating-radial-gradient(red, yellow 10%, green 15%);    background: repeating-radial-gradient(red, yellow 10%, green 15%);}三、文本3.1 text-shadow 文本阴影规则跟box-shadow类似，text-shadow：X轴偏移值，Y轴偏移值，阴影模糊半径，颜色。在这里，需要注意的是，如果前三个数值写两个，比如text-shadow：5px 5px #ccc；会认为阴影模糊半径不存在，仍然有文字的重影，但是没有模糊的视觉效果了。3.2 word-wrap | word-break 是否允许长单词换行，这两个可以一起使用word-wrap: normal(只允许断点字换行) | break-word(如果单词过长，截断强制换行) word-break: normal(浏览器默认的换行规则，一般是不允许长单词内部换行) | break-all（允许在单词内换行) | keep-all(只能在半角空格或连字符处换行);<div class="box1">aaaaa aaaaaaaaaaaaaaaaaaa aaaaaaaaaaa aaaaaaaaaa</div><div class="box2">aaaaa aaaaaaaaaaaaaaaaaaa aaaaaaaaaaa aaaaaaaaaa</div><div class="box3">aaaaa aaaaaaaaaaaaaaaaaaa aaaaaaaaaaa aaaaaaaaaa</div><div class="box4">aaaaa aaaaaaaaaaaaaaaaaaa aaaaaaaaaaa aaaaaaaaaa</div>div{    float:left;    margin:30px;    width: 100px;    height: 150px;    border: 2px solid rgba(0, 0, 0, 0.5);    font-size: 14px;    line-height: 1.5;}.box1{    word-wrap: normal;}.box2{    word-wrap: break-word;}.box3{    word-break: keep-all;}.box4{    word-break: break-all;}

新手进行网页布局中肯定会遇到很多大大小小的问题，这篇文章希望能帮到大家！1、若调整一个元素宽高不管用时，请查看这个元素是不是行内元素，若是则使用下面代码设置为块级元素display:block;2、在制作导航菜单时，垂直居中用百分比的方法position:relative;top:50%;transform:translateY(-50%);3、透明的背景样式background:rgba(0,0,0,0.5);4、去掉a链接的默认下划线样式text-decoration:none;5、去掉li列表的默认样式list-style-type:none;6、去掉苹果浏览器默认的按钮样式-webkit-appearance:none;7、将一个元素旋转45度transform:rotateZ(45deg);8、用弹性布局的方法对元素进行垂直居中对齐在父元素设置display:flex;在子元素设置margin:auto;