CSS - web秀

综合小程序服务器面试工具类ThreeJs比特币JavaScriptCssVue 展开

1年前

CSS3基础知识：box-shadow, outline,outline-offset 实现多重边框

CSS3基础知识：box-shadow, outline,outline-offset 实现多重边框

基础知识定义box-shadow相信很多人都已经用透了，可用来给元素添加各种阴影效果，反过来，也只有我们需要实现阴影时才会想起它，其实，box-shadow还接受第四个参数作为阴影扩张半径，当我们只设置扩张半径时，零偏移，零模糊，产生的效果其实相当于一条实线“边框”。CSSbox-shadow属性用于在元素的框架上添加阴影效果。你可以在同一个元素上设置多个阴影效果，并用逗号将他们分隔开。该属性可设置的值包括阴影的X轴偏移量、Y轴偏移量、模糊半径、扩散半径和颜色。语法/*x偏移量|y偏移量|阴影颜色*/bo

700 1 0

2年前

炫酷的CSS 作图web组件 - css-doodle

炫酷的CSS 作图web组件 - css-doodle

今天不写代码，就看看人家是如何写代码的。什么是css-doodle官方地址：https://css-doodle.com/<css-doodle/>是一个Web组件。其基于ShadowDOMV1和CustomElementsV1来构建的。该组件可以帮助轻松的使用CustomElements、ShadowDOM和CSSGrid创建任何你想要的图案（CSS图案）。创建出来的图案你可以运用于Web页面中。当你看到CustomElements、ShadowDOM和CSSGrid的时候，一定很担忧兼容问

2487 53 0

1年前

CSS如何画一个三角形？原理是什么？

CSS如何画一个三角形？原理是什么？

一、前言在前端开发的时候，我们有时候会需要用到一个三角形的形状，比如地址选择或者播放器里面播放按钮通常情况下，我们会使用图片或者svg去完成三角形效果图，但如果单纯使用css如何完成一个三角形呢？实现过程似乎也并不困难，通过边框就可完成二、实现过程在以前也讲过盒子模型，默认情况下是一个矩形，实现也很简单<style>.border{width:50px;height:50px;border:2pxsolid;border-color:#96ceb4#ffeead#d9534f#ffad60;}

399 1 0

5月前

利用 CSS Overview 面板重构优化你的网站

利用 CSS Overview 面板重构优化你的网站

本文将向大家介绍Chrome87开始支持的CSSOverviewPanel，并且介绍如何更好地利用这个面板。通过CSSOverviewPanel，可能可以帮助我们：更准确（高保真）的还原设计稿，辅助设计走查环节更好的精简我们的CSS代码辅助进行网站的可访问性提升对网站样式的整体概况有更清晰的认识什么是CSSOverviewPanelCSSOverviewPanel直译过来就是CSS概览面板，它是从Chrome87开始支持的一项实验室功能。属于控制台DevTool下的一个TAB：默认这个实验室功能是关闭的，

45 0 0

5月前

3D 穿梭效果？使用 CSS 轻松搞定

3D 穿梭效果？使用 CSS 轻松搞定

背景周末在家习惯性登陆Apex，准备玩几盘。在登陆加速器的过程中，发现加速器到期了。我一直用的腾讯网游加速器，然而点击充值按钮，提示最近客户端升级改造，暂不支持充值（这个操作把我震惊了~）。只能转头下载网易UU加速器。打开UU加速器首页，映入眼帘的是这样一幅画面：瞬间，被它这个背景图吸引。出于对CSS的敏感，盲猜了一波这个用CSS实现的，至少也应该是Canvas。打开控制台，稍微有点点失望，居然是一个.mp4文件：再看看Network面板，这个.mp4文件居然需要3.5M？emm，瞬间不想打游戏了。这么个

44 0 0

4年前

分分钟学会CSS Grid布局

分分钟学会CSS Grid布局

前言Grid布局是网站设计的基础，CSSGrid是创建网格布局最强大和最简单的工具。CSSGrid今年也获得了主流浏览器（Safari，Chrome，Firefox，Edge）的原生支持，所以我相信所有的前端开发人员都必须在不久的将来学习这项技术。在本文中，我将尽可能快速地介绍CSS网格的基本知识。我会把你不应该关心的一切都忽略掉了，只是为了让你了解最基础的知识。你的第一个Grid布局CSSGrid布局由两个核心组成部分是wrapper（父元素）和items（子元素）。wrapper是实际的grid(网格

10031 496 0

5月前

新时代布局中一些有意思的特性

新时代布局中一些有意思的特性

在最新的ChromeCanary中，一个有意思的CSS语法ContainerQueries得到了支持。ChromeCanary：开发者专用的每日构建版，站上网络科技最前沿。当然，不一定稳定~而在最近几个Chrome版本中，有一些挺有意思的属性相继得到支持，本文就将介绍一下，在今天，新时代布局中，我们能逐渐去使用的一些有意思的新特性，通过本文，你将能了解到：flex布局中的gap属性控制容器宽高比属性aspect-ratiofirefox下的CSSGrid瀑布流布局（grid-template-rows:m

48 0 0

5月前

CSS新特性contain，控制页面的重绘与重排

CSS新特性contain，控制页面的重绘与重排

在介绍新的CSS属性contain之前，读者首先需要了解什么是页面的重绘与重排。之前已经描述过很多次了，还不太了解的可以先看看这个提高CSS动画性能的正确姿势。OK，下面进入本文正题，contain为何？contain属性允许我们指定特定的DOM元素和它的子元素，让它们能够独立于整个DOM树结构之外。目的是能够让浏览器有能力只对部分元素进行重绘、重排，而不必每次都针对整个页面。Thecontainpropertyallowsanauthortoindicatethatanelementanditscont

53 0 0

1年前

如何使用css完成视差滚动效果?

如何使用css完成视差滚动效果?

如何使用css完成视差滚动效果?一、是什么视差滚动（ParallaxScrolling）是指多层背景以不同的速度移动，形成立体的运动效果，带来非常出色的视觉体验我们可以把网页解刨成：背景层、内容层、悬浮层当滚动鼠标滑轮的时候，各个图层以不同的速度移动，形成视觉差的效果二、实现方式使用css形式实现视觉差滚动效果的方式有：background-attachmenttransform:translate3Dbackground-attachment作用是设置背景图像是否固定或者随着页面的其余部分滚动值分别有如

279 0 0

5月前

CSS ::marker 让文字序号更有意思

CSS ::marker 让文字序号更有意思

本文将介绍CSS中一个比较有意思的伪元素::marker，利用它，我们可以让我们的文字序号变得更加的有意思！什么是::markerCSS伪元素::marker是从CSSPseudo-ElementsLevel3开始新增，CSSPseudo-ElementsLevel4中完善的一个比较新的伪元素，从Chrome86+开始得到浏览器的支持。利用它，我们可以给元素添加一个伪元素，用于生成一个项目符号或者数字。正常而言，我们有如下结构：<ul><li>Contagious</li&g

37 0 0

下拉加载更多

最新文章