首先附上效果图：
以上的效果完全是用 css 来实现的，那么是怎么实现的呢？
我们知道 html 中有一些特殊的字符，具体的请点击 HTML特殊字符大全。
通过特殊字符，利用 css 中的 margin 或者 position 方法完全可以实现以上效果。
复制代码代码如下: <!DOCTYPE HTML> <html lang=”en-US”> <head> <meta charset=”UTF-8″> <title>字符制作三角边框</title> <style type=”text/css”> *{margin:0;padding:0;} body{font-family:SimSun
2023-10-28 09:44:57
31KB
1
前言
最近做一个登陆界面的，突然想使用这种背景图片透明，而内容不透明的效果，这里我就说一说我的两个思路吧。
效果展示
半透明
不透明
常见的失败做法
最常见的做法事设置元素的opacity,这种设置出来的效果就是内容与背景都事半透明的，严重影响视觉效果。
还有就是设置background-color:rgba(),这种方式只能设置背景颜色的透明度。
正确姿势
我想到两个方法，第一个就是利用伪元素::before,我们通过给伪元素添加背景并且将伪元素的设置伪元素的背景透明度来实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta cha
2023-03-08 21:16:57
194KB
1
右侧浮动效果，最早有QQ联系面板，对联广告等，大多数都是基于Javascript实现的动态效果，今天我给大家分享一个只需要CSS结合DIV实现的右侧浮动效果
2023-02-27 23:45:26
66KB
1
网页制作前端用纯CSS制作二级导航，用最简单的CSS样式实现二级导航下拉列表，html和css样式简洁清晰，一看就会，拿来就能直接用。
2022-12-11 22:45:52
19KB
1
本文实例讲述了纯CSS实现超简单的二级下拉导航菜单代码。分享给大家供大家参考。具体如下：
这是一款纯CSS菜单，二级下拉导航效果，是最简洁的CSS导航菜单，兼容性也很棒，IE7/8、火狐等都支持，而且它还是学习CSS菜单编写的典型教程，让你学会很多CSS技巧。
运行效果截图如下：
在线演示地址如下：
http://demo.jb51.net/js/2015/css-simple-2l-show-nav-menu-codes/
具体代码如下：
复制代码代码如下:<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”“http
2022-12-01 13:58:03
61KB
1
资源基于博主https://blog.csdn.net/weixin_44009656?type=blog的文章内容修改，感谢博主提供的优质资源，我上传的版本修复了页面初始化的时候信封触发关闭动画的问题。
2022-11-08 15:39:27
11KB
1