企业官网建设流程全解析

公司网站建设岗位,网站建设合作协议,自己怎么注册域名,深圳做网站的公司哪个好小白前端速成#xff1a;CSS边框阴影搞不定#xff1f;这篇让你一次理清楚#xff01;小白前端速成#xff1a;CSS边框阴影搞不定#xff1f;这篇让你一次理清楚#xff01;边框#xff1f;不就是把线画粗一点吗#xff1f;图样图森破画三角算什么#xff0c;我还拿它…小白前端速成CSS边框阴影搞不定这篇让你一次理清楚小白前端速成CSS边框阴影搞不定这篇让你一次理清楚边框不就是把线画粗一点吗图样图森破画三角算什么我还拿它搞过等宽布局border-radius 能画胶囊还能画花瓣别再只会50%border-image 贴图把边框当背景使还能带渐变阴影别把box-shadow当“影子”它其实是“免费层”多层阴影叠起来能当背景还能当灯text-shadow 和 box-shadow 别混混了就翻车阴影太多卡成PPT三招教你保命组合技双层边框不用伪元素一条border一条outline悬浮动效hover时边框变色阴影扩散代码短到像偷懒调试阴影别靠肉眼Chrome 新功能爽翻SCSS 函数批量生成阴影设计系统 token 走起来最后啰嗦两句小白前端速成CSS边框阴影搞不定这篇让你一次理清楚先别急着关页面我知道你对“边框”俩字已经PTSD了——每次UI稿甩过来一个“圆角描边外发光”你就开始原地抠脑壳“这到底要几个div我要不要再叠一层伪元素为啥我写出来的像贴对联”放心今天咱们不背八股文直接蹲马路牙子上开唠把我这些年踩过的坑、挨过的骂、还有半夜两点搜“box-shadow 怎么像灯管一样亮”的羞耻关键词一次性打包给你。边框不就是把线画粗一点吗图样图森破刚毕业那阵子我以为border就是solid、dashed、dotted三板斧直到leader甩过来一个需求“按钮左上角缺个角要斜的别用图片大小可配置。”我当场愣成表情包——这玩意儿还能缺角结果大佬两行代码搞定/* 缺角按钮要几毫米缺几毫米 */.cut-btn{border:solid #ff5a5f;border-width:10px 10px 0 0;/* 只留右边上边 */background:#fff;clip-path:polygon(0 0,100% 0,100%calc(100% - 10px),calc(100% - 10px)100%,0 100%);}我当场给跪——border-width四个值还能这么玩没错它本质就是“上右下左”顺时针配合透明色和clip-path缺角、斜边、梯形都能撸。后来我自己又魔改了一版不用clip-path纯border画梯形IE11 都能跑/* 梯形标签纯border trick */.trapeze{height:0;width:100px;border-bottom:40px solid #ff5a5f;border-left:20px solid transparent;border-right:20px solid transparent;}看到没border就是乐高积木你把它当“线”就亏了它其实是“四块三角形 一个矩形”拼起来的透明色一上立刻变向量图。画三角算什么我还拿它搞过等宽布局做列表卡片时UI要求“每一列中间有分割线但左右最边缘不要”而且“数据条数不确定不能写死margin”。我一开始蠢到给每个item加右边框再单独写last-child:border-none结果产品突然说“要响应式一行可能3个也可能4个”我当场裂开。后来学会一招透明边框 负margin代码短得离谱.list{display:flex;flex-wrap:wrap;margin-left:-10px;/* 负margin 把第一列拉回 */}.item{flex:0 0calc(25% - 10px);border-left:10px solid transparent;/* 透明边框当gap用 */background-clip:padding-box;/* 背景不要盖住边框 */}一行代码解决“响应式 等分 中间有缝”还不用媒体查询产品改需求我直接改calc()里的百分比下班比隔壁组早两个钟头。border-radius 能画胶囊还能画花瓣别再只会50%圆角值很多人就写个4px、8px高级点的写50%画圆。其实border-radius可以“斜杠”写椭圆角语法是“水平半径 / 垂直半径”搞懂这条花瓣按钮随手就来/* 花瓣形标签 */.petal{width:80px;height:40px;background:#ff5a5f;border-radius:50% 50% 50% 50% / 60% 60% 40% 40%;}再叠一层旋转八瓣花都能给你整出来情人节给女朋友网页放烟花我就是靠这招脱单的虽然后来还是分了但代码留下就行。border-image 贴图把边框当背景使还能带渐变有时候UI给你一条“彩虹描边”你总不能真写7层div吧border-image一招搞定/* 彩虹渐变边框 */.rainbow-box{border:8px solid;border-image:linear-gradient(45deg,#f66,#ff0,#0f0,#0ff,#00f,#90f,#f0f)1;}注意最后那个“1”是切片宽度写1就行浏览器会自动把渐变切成九宫格四个角自动对齐放大缩小不失真。缺点也有border-image不占用布局空间所以如果你指望“边框占像素”会发现内部文字会贴边需要再补padding。阴影别把box-shadow当“影子”它其实是“免费层”很多人写阴影就记住三个值x y blur其实完整语法是五个值box-shadow: offsetX offsetY blur spread color inset;spread扩张半径是最被低估的参数想做“内凹”效果靠的就是负spread inset/* 内凹输入框 */.input-inset{border:none;box-shadow:inset 0 2px 4px -2pxrgba(0,0,0,.3);}看到没inset告诉浏览器“影子往里面长”负spread把模糊区域往回收轻点一下输入框立刻陷进去高级感10086。多层阴影叠起来能当背景还能当灯做单页活动的时候产品要“按钮像被舞台灯打光”我直接叠三层/* 霓虹灯按钮 */.neon-btn{background:#111;color:#fff;border:none;box-shadow:0 0 5px 2pxrgba(0,255,255,.7),0 0 10px 4pxrgba(0,255,255,.5),0 0 20px 8pxrgba(0,255,255,.3);}三层阴影blur依次变大透明度依次降低肉眼就是“光晕扩散”。注意颜色顺序最亮的最靠近元素越往外越虚反过来就会像“黑洞”别问我怎么知道上线被用户吐槽“按钮像被屁熏黑”的惨案还热乎。text-shadow 和 box-shadow 别混混了就翻车text-shadow没有spread没有inset你给它写5个值浏览器直接罢工。曾经我把box-shadow的那串复制粘贴给文字结果整个页面字全消失控制台一排“Invalid property value”我差点把Git仓库回滚到上古时代。正确示范/* 立体文字 */.text-3d{font-size:48px;color:#fff;text-shadow:0 1px 0 #ccc,0 2px 0 #c9c9c9,0 3px 0 #bbb,0 4px 0 #b9b9b9,0 5px 0 #aaa,0 6px 1pxrgba(0,0,0,.1);}一层一层往下抄像楼梯一样立体效果立马拉满而且性能比background-clip:text高到不知哪里去了。阴影太多卡成PPT三招教你保命能用filter:drop-shadow()就别box-shadow叠N层drop-shadow只渲染一次还能自动跟随透明PNG轮廓。移动端给阴影加will-change:transform告诉GPU“这货要动”避免重绘回流。如果还是卡直接上假阴影after伪元素写一张1×1的base64模糊图background-size:100% 100%性能瞬间满血。/* 假阴影性能怪兽 */.fake-shadow{position:relative;}.fake-shadow::after{content:;position:absolute;left:0;right:0;bottom:-10px;height:20px;background:url(data:image/png;base64,iVBORw0KGgoAAAANS...)no-repeat;background-size:100% 100%;opacity:.3;}base64图自己用PS导一张20px高、高斯模糊20的条体积不到1KB阴影再多也不抖。组合技双层边框不用伪元素一条border一条outlineoutline跟border最大区别不占地、不参与盒模型、可以圆角Chrome 94支持outline-radius。所以想快速双层描边outline比伪元素香/* 双层边框 */.double-border{border:3px solid #ff5a5f;outline:3px solid #333;outline-offset:-3px;/* 负值往里收 */border-radius:10px;outline-radius:10px;/* 同步圆角 */}一行代码真·双层outline-offset还能玩负值内嵌、外凸随意切记得留好padding别让outline盖住文字。悬浮动效hover时边框变色阴影扩散代码短到像偷懒/* 卡片悬浮 */.card{transition:all .3s;border:2px solid transparent;box-shadow:0 2px 6pxrgba(0,0,0,.1);}.card:hover{border-color:#ff5a5f;box-shadow:0 6px 16pxrgba(0,0,0,.15);transform:translateY(-2px);/* 再抬个屁股 */}注意transition写all最省事但生产环境最好精确到border-color, box-shadow, transform避免浏览器把不需要的属性也插帧性能掉得比头发还快。调试阴影别靠肉眼Chrome 新功能爽翻DevTools→Elements→Styles→点击box-shadow那个小紫色预览图标会弹出可视化面板拖滑块就能调offset、blur、spread实时预览比“改一次刷新一次”高效100倍。如果阴影被父容器吃掉八成是overflow:hidden把爹元素改成overflow:visible或者把阴影丢到after里z-index再拉高基本药到病除。SCSS 函数批量生成阴影设计系统 token 走起来// 阴影强度 map $shadows: ( sm: (0 1px 2px 0 rgba(0,0,0,.05)), md: (0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -2px rgba(0,0,0,.1)), lg: (0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.1)), ); // 生成工具类 each $level, $value in $shadows{ .shadow-#{$level}{ box-shadow: $value; } }设计稿一改阴影强度只改map全项目自动同步再也不用全局搜索0 4px 6px rgba(0,0,0,0.1)改到眼瞎。最后啰嗦两句别被UI稿里那些“看起来好复杂”的效果吓到九成都是border调调颜色、box-shadow叠两层的事。记住两句话border不是线是乐高shadow不是影是层。把这两句刻烟吸肺下次再甩过来一个“五彩斑斓的黑”你就能淡定地喝口咖啡敲下border:2px solid transparent;box-shadow:0 0 0 2px #000,0 0 0 4px #f0f,0 0 0 6px #0ff;然后冲产品咧嘴一笑“五彩斑斓的黑交付”欢迎来到我的博客很高兴能够在这里和您见面希望您在这里可以感受到一份轻松愉快的氛围不仅可以获得有趣的内容和知识也可以畅所欲言、分享您的想法和见解。推荐DTcode7的博客首页。一个做过前端开发的产品经理经历过睿智产品的折磨导致脱发之后励志要翻身农奴把歌唱一边打入敌人内部一边持续提升自己为我们广大开发同胞谋福祉坚决抵制睿智产品折磨我们码农兄弟专栏系列点击解锁学习路线(点击解锁知识定位《微信小程序相关博客》持续更新中~结合微信官方原生框架、uniapp等小程序框架记录请求、封装、tabbar、UI组件的学习记录和使用技巧等《AIGC相关博客》持续更新中~AIGC、AI生产力工具的介绍例如stable diffusion这种的AI绘画工具安装、使用、技巧等总结《HTML网站开发相关》《前端基础入门三大核心之html相关博客》前端基础入门三大核心之html板块的内容入坑前端或者辅助学习的必看知识《前端基础入门三大核心之JS相关博客》前端JS是JavaScript语言在网页开发中的应用负责实现交互效果和动态内容。它与HTML和CSS并称前端三剑客共同构建用户界面。通过操作DOM元素、响应事件、发起网络请求等JS使页面能够响应用户行为实现数据动态展示和页面流畅跳转是现代Web开发的核心《前端基础入门三大核心之CSS相关博客》介绍前端开发中遇到的CSS疑问和各种奇妙的CSS语法同时收集精美的CSS效果代码用来丰富你的web网页《canvas绘图相关博客》Canvas是HTML5中用于绘制图形的元素通过JavaScript及其提供的绘图API开发者可以在网页上绘制出各种复杂的图形、动画和图像效果。Canvas提供了高度的灵活性和控制力使得前端绘图技术更加丰富和多样化《Vue实战相关博客》持续更新中~详细总结了常用UI库elementUI的使用技巧以及Vue的学习之旅《python相关博客》持续更新中~Python简洁易学的编程语言强大到足以应对各种应用场景是编程新手的理想选择也是专业人士的得力工具《sql数据库相关博客》持续更新中~SQL数据库高效管理数据的利器学会SQL轻松驾驭结构化数据解锁数据分析与挖掘的无限可能《算法系列相关博客》持续更新中~算法与数据结构学习总结通过JS来编写处理复杂有趣的算法问题提升你的技术思维《IT信息技术相关博客》持续更新中~作为信息化人员所需要掌握的底层技术涉及软件开发、网络建设、系统维护等领域的知识《信息化人员基础技能知识相关博客》无论你是开发、产品、实施、经理只要是从事信息化相关行业的人员都应该掌握这些信息化的基础知识可以不精通但是一定要了解避免日常工作中贻笑大方《信息化技能面试宝典相关博客》涉及信息化相关工作基础知识和面试技巧提升自我能力与面试通过率扩展知识面《前端开发习惯与小技巧相关博客》持续更新中~罗列常用的开发工具使用技巧,如 Vscode快捷键操作、Git、CMD、游览器控制台等《photoshop相关博客》持续更新中~基础的PS学习记录含括PPI与DPI、物理像素dp、逻辑像素dip、矢量图和位图以及帧动画等的学习总结日常开发办公生产【实用工具】分享相关博客》持续更新中~分享介绍各种开发中、工作中、个人生产以及学习上的工具丰富阅历给大家提供处理事情的更多角度学习了解更多的便利工具如Fiddler抓包、办公快捷键、虚拟机VMware等工具吾辈才疏学浅摹写之作恐有瑕疵。望诸君海涵赐教。望轻喷嘤嘤嘤非常期待和您一起在这个小小的网络世界里共同探索、学习和成长。愿斯文对汝有所裨益纵其简陋未及渊博亦足以略尽绵薄之力。倘若尚存阙漏敬请不吝斧正俾便精进