随笔分类 - Css
摘要：有人可能会有疑问，CSS3动画不是只有animation一个属性吗？怎么又和转化（transform）和过渡（transition）扯上关系了，其实并非如此，转化（transform）属性让动画的变换多元化，而过渡（transition）属性是动画中的一种表现形式，也可以说成是动画一个版本。 css
阅读全文
摘要：用于手机端受dpr的影响，实际开发中，PC端和移动端展示的效果不太一样，往往在PC端显示的是1px，移动端常常是偏粗一些。 解决办法： 主要是用到伪类及缩放。在需要画边框的元素上，设置一个伪类，它的伪类相对于这个元素是一个绝对定位，通过伪类画一个1px边框，然后把它定位到元素的下面，就变成一个下边框
阅读全文
摘要：CSS选择器分为基本选择器、组合选择器、属性选择器。基本选择器是.class、#id、*、element选择器，经常用，不赘述。 主要介绍下组合选择器和属性选择器，在项目中也经常用到：👇 一、组合选择器 1、element,element 组选择器 用于选取第一个指定的元素之后(不是内部)紧跟的元
阅读全文
摘要：水平条纹 现在容器顶部的20%区域被填充为#fb3实色，而底部20%区域被填充#58a实色。真正的渐变只出现在容器60%的高度区域。 当渐变设置为50%时，已经没有渐变效果，只有两块实色，各占据了background-image一般面积。也可以通过background-size设置尺寸： 效果图：
阅读全文
摘要：之前因为公司项目需要,在网上找到的: 直接上代码了 html代码 css代码
阅读全文
摘要：平行四边形 把所有样式（背景、边框）应用到伪元素上，然后再对伪元素进行变型。因为我们的内容并不是包含在伪元素中，所以内容并不会受到变形的影响。 我们希望伪元素保持良好的灵活性，可以自动继承其宿主元素的尺寸，甚至当宿主元素的尺寸是由其内容来决定时仍然如此。一个简单地办法是给宿主元素应用postion:
阅读全文
摘要：有时我们需要一个容器，只在内侧有圆角，而边框或描边的四个角在外部仍然保持直角的形状，如图1所示。用两个元素可以实现这个效果，并没有特别的。 图1 解决方案： 若用一个元素达到此目的，刚好出现图1的效果。 原因1：描边（outline属性）不会跟着元素的圆角走（因而显示的是直角），而box-shado
阅读全文
摘要：background-position的扩展语法方案 在css3中，background-position属性已经得到了扩展，它允许我们指定背景图片距离任意角的偏移量，只要我们在偏移量前面指定关键字。举例来说，如果想让背景图片跟右边保持20px的偏移量，同时跟底边保持10px的偏移量，可以这样做：
阅读全文
摘要：1、outline 方案 如需要两层边框，可以先设置一层常规边框，再加上outline（描边）属性来产生外层的边框。 描边的另一个好处在于，可以通过outline-offset属性来控制它跟元素边缘之间的间距，这个属性可以接受负值。这对于某些效果来说非常重要。下例子中，实现了简单地缝边效果。 如图所
阅读全文
摘要：相信大家以前都是用过CSS的半透明颜色，比如rgba()和hsla()。但在一些属性（比如边框）中使用半透明颜色并没有想象中那么容易。我们接下来会看的： 假设我们想给一个容器设置一个白色的背景和一道半透明的白色边框，body的背景会从半透明的边框透过来。我们最开始的尝试可能是酱子的： 结果如图所示：
阅读全文
浙公网安备 33010602011771号