本篇将介绍几个css小技巧,目录如下:
- 自定义引用标签的符号
- 重置所有标签样式
- 禁止文本选择
- 制作小三角形
2024年10月21日
通过本文章,你可以掌握以下内容:
2024年10月21日
css背景可以是纯色,也可以是图片。
背景色
background-color 属性为元素设置背景色。
p{background-color: #ccc;}
在浏览器中显示:
设置p元素的背景颜色为灰色
注意:background-color 不能继承,其默认值是 transparent(透明的)。如果一个元素没有指定背景色,那么背景就是透明的,这样其祖先元素的背景才能可见。
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 : 为元素设置背景颜色,会填充元素的内容、内边距、边框。如果边框有透明部分,会透过这些透明部分显示出背景色