2024年10月21日
北方的冬天最怕有风，空气虽然好了，但是异常的冷，吸几口冷风感觉肺都结了冰。一大早小白来到办公室琢磨用户交互方面的问题，看了几个网站发现很多网站的弹窗都是自定义的，而且还把弹窗周围的区域做成了半透明状，看上去非常不错。于是小白也准备自己通过css布局一个弹窗试试，一来以后肯定会用上这个功能，二来熟悉一下最近掌握的CSS+HTML布局。
说干就干，小白打开webStrom做起了弹窗的布局。他首先用一个容器layer作为弹窗的容器，然后里面放了窗口容器（dialog），窗口容器里面还包含了三个子容器，分别是标题（layerTitle）、内容区域（layerContent）、按钮区域（layerBTContainer）。
2024年10月21日
背景图像可能是我们所有前端开发人员在我们的职业生涯中至少使用过几次的CSS属性之一。大多数人认为背景图像不可能有任何不寻常的地方，但经过研究，答案并非如此。所以本文收集了七个我认为最有用的技巧，并创建了一些代码示例。
让背景图适配视口很容易，需要使用下面 CSS 即可：
事例源码：https://codepen.io/duomly/pen/xxwYBOE
2024年10月21日
实例
设定右边框的颜色：
p
{
border-style:solid;
border-right-color:#ff0000
}
属性定义及使用说明
border-right-color属性设置一个元素的的右边框的颜色。
注意 请始终把 border-style 属性声明到 border-color 属性之前。元素必须在您改变其颜色之前获得边框。
2024年10月21日
CSS奇思妙想 -- 使用 background 创造各种美妙的背景（下篇）...
使用 mask
除去混合模式，与背景相关的，还有一个非常有意思的属性 -- MASK。
mask 译为遮罩。在 CSS 中，mask 属性允许使用者通过遮罩或者裁切特定区域的图片的方式来隐藏一个元素的部分或者全部可见区域。
对 mask 的一些基础用法还不太熟悉的，可以先看看我的这篇文章 -- 奇妙的 CSS MASK。
2024年10月21日
像我之前提到的那样，文档树中的每个元素只是一个矩形盒子。这些盒子都有一个背景层，背景层可以是完全透明或者其它颜色，也可以是一张图片。此背景层由8个CSS属性（加上1个简写的属性）控制。
background-color
background-color属性设置元素的背景颜色。它的值可以是任意合法的颜色值或者是transparent关键字。
.left { background-color: #ffdb3a; }
.middle { background-color: #67b3dd; }
.right { background-color: transparent; }
2024年10月21日
background可以帮助前端er们丰富元素的背景，让网页更加绚烂，是一个使用频率很高的属性。首先，我们会先介绍background-color、background-image、background-repeat、background-attachment、background-position基础属性。
1 background-color : 为元素设置背景颜色，会填充元素的内容、内边距、边框。如果边框有透明部分，会透过这些透明部分显示出背景色
2024年10月21日
在div+css网站布局中，经常要用到背景透明，所在背景的文字内容也会跟着透明，但有时文字需求是不透明的，确实让我们web前端开发者很苦恼，解决这个问题方法有二，第一背景用图片，第二那就是用css来解决。
1.背景透明，文字也透明，以下代码我们常用但不是我们想要的
filter:alpha(opacity=50); //IE滤镜，透明度50%
-moz-opacity:0.5; //Firefox私有，透明度50%
2024年10月21日
我们学习 CSS 背景属性。
假设这里有个 div 容器，宽 400，高 300，默认情况下，这个 div 是没有背景的，或者说它的背景是透明的，我们拿一张图片实验一下就能看得出来，这个 div 在默认情况下，背景是透明的。