重学css 0x3 CSS效果
2024-05-09 06:17:17
box-shadow
- 营造层次感（立体感）
- 充当没有宽度的边框
- 特殊效果
/* x偏移量 | y偏移量 | 阴影颜色 */
box-shadow: 60px -16px teal;/* x偏移量 | y偏移量 | 阴影模糊半径 | 阴影颜色 */
box-shadow: 10px 5px 5px black;/* x偏移量 | y偏移量 | 阴影模糊半径 | 阴影扩散半径 | 阴影颜色 */
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);/* 插页(阴影向内) | x偏移量 | y偏移量 | 阴影颜色 */
box-shadow: inset 5em 1em gold;/* 任意数量的阴影，以逗号分隔 */
box-shadow: 3px 3px red, -1em 0 0.4em olive;/* 全局关键字 */
box-shadow: inherit;
box-shadow: initial;
box-shadow: unset;基本用法
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>.container{background:red;width:200px;height:200px;margin: 100px;/* box-shadow: 5px 5px 10px 0 rgba(0,0,0,.2); *//* box-shadow: inset 5px 5px 10px 0 rgba(0,0,0,.2); */box-shadow: 0 0 0 5px green;}</style>
</head>
<body><div class="container"></div>
</body>
</html>
高级用法
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>.container{background:red;width:10px;height:10px;margin: 10px;border-radius: 5px;box-shadow: 200px 200px 0 5px green,230px 200px 0 5px green,215px 215px 0 -3px red;}</style>
</head>
<body><div class="container"></div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>.container{position: relative;width: 36px;height: 36px;border-radius: 50%;margin: 300px auto;background-color: #C63D01;box-shadow: 0px 0px 0 1px #000,-20px -26px 0 -10px #333333,-34px -40px 0 15px #fff,-34px -40px 0 16px,20px -26px 0 -10px #333333,34px -40px 0 15px #fff,34px -40px 0 16px,0px 55px 0 75px #fff,0px 55px 0 76px #000,0 22px 0 120px #08BDEB,0 22px 0 121px #000;}/*叮当猫的鼻子*/.container::before{content: '';position: absolute;bottom: -81px;left: 17px;height: 80px;width: 2px;background-color: #000;}/*叮当猫的嘴巴*/.container::after{content: '';position: absolute;bottom: -83px;left: -44px;width: 125px;height: 70px;border-bottom-right-radius: 28px;border-bottom: solid 2px black;border-bottom-left-radius: 28px;}</style>
</head>
<body><div class="container"></div>
</body>
</html>
text-shadow
- 立体感
- 印刷质感
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>.container{margin:0 auto;max-width: 800px;font-size: 18px;line-height: 2em;font-family: STKaiti;text-shadow: 1px 1px 0 #aaa;}.container p{text-indent: 2em;}</style>
</head>
<body><div class="container"><p>我与父亲不相见已二年余了，我最不能忘记的是他的背影。那年冬天，祖母死了，父亲的差使也交卸了，正是祸不单行的日子，我从北京到徐州，打算跟着父亲奔丧回家。到徐州见着父亲，看见满院狼藉的东西，又想起祖母，不禁簌簌地流下眼泪。父亲说，“事已如此，不必难过，好在天无绝人之路！”</p><p>回家变卖典质，父亲还了亏空；又借钱办了丧事。这些日子，家中光景很是惨淡，一半为了丧事，一半为了父亲赋闲。丧事完毕，父亲要到南京谋事，我也要回北京念书，我们便同行。</p><p>到南京时，有朋友约去游逛，勾留了一日；第二日上午便须渡江到浦口，下午上车北去。父亲因为事忙，本已说定不送我，叫旅馆里一个熟识的茶房陪我同去。他再三嘱咐茶房，甚是仔细。但他终于不放心，怕茶房不妥帖；颇踌躇了一会。其实我那年已二十岁，北京已来往过两三次，是没有甚么要紧的了。他踌躇了一会，终于决定还是自己送我去。我两三回劝他不必去；他只说，“不要紧，他们去不好！”</p></div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>.container{margin:0 auto;max-width: 800px;font-size: 18px;line-height: 2em;font-family: STKaiti;background: black;text-shadow: -1px -1px 0 white,-1px 1px 0 white,1px -1px 0 white,1px 1px 0 white;}.container p{text-indent: 2em;}</style>
</head>
<body><div class="container"><p>我与父亲不相见已二年余了，我最不能忘记的是他的背影。那年冬天，祖母死了，父亲的差使也交卸了，正是祸不单行的日子，我从北京到徐州，打算跟着父亲奔丧回家。到徐州见着父亲，看见满院狼藉的东西，又想起祖母，不禁簌簌地流下眼泪。父亲说，“事已如此，不必难过，好在天无绝人之路！”</p><p>回家变卖典质，父亲还了亏空；又借钱办了丧事。这些日子，家中光景很是惨淡，一半为了丧事，一半为了父亲赋闲。丧事完毕，父亲要到南京谋事，我也要回北京念书，我们便同行。</p><p>到南京时，有朋友约去游逛，勾留了一日；第二日上午便须渡江到浦口，下午上车北去。父亲因为事忙，本已说定不送我，叫旅馆里一个熟识的茶房陪我同去。他再三嘱咐茶房，甚是仔细。但他终于不放心，怕茶房不妥帖；颇踌躇了一会。其实我那年已二十岁，北京已来往过两三次，是没有甚么要紧的了。他踌躇了一会，终于决定还是自己送我去。我两三回劝他不必去；他只说，“不要紧，他们去不好！”</p></div>
</body>
</html>
border-radius
- 圆角矩形
- 圆形
- 半角/扇形
- 特殊角
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>.container{width: 0;height: 0;background: red;border: 10px solid green;/* border-radius: 10px; */border-radius: 50%;/*border: 50px solid green;border-top-left-radius: 100px 50px;border-top-right-radius: 0;border-bottom-left-radius: 0;border-bottom-right-radius: 0;*//* border-radius: 10px 10px 10px 10px / 20px 20px 20px 20px; */}</style>
</head>
<body><div class="container"></div>
</body>
</html>
background
- 纹理、图案
- 渐变
- 雪碧图动画
- 背景图尺寸适应
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>.container{}.i{width: 20px;height: 20px;background: url(./background.png) no-repeat;background-size: 20px 40px;transition: background-position .4s;}.i:hover{background-position: 0 -20px;}</style>
</head>
<body><div class="container"><div class="i"></div></div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>.container{width: 400px;height: 300px;border: 1px solid red;background:url(./panda.jpg);background-size: contain;background-repeat: no-repeat;background-position: center center;/* background-size: cover; */}</style>
</head>
<body><div class="container"></div>
</body>
</html>
clip-path
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>.container{width: 400px;height: 300px;border: 1px solid red;background:url(./panda.jpg);background-size: cover;background-repeat: no-repeat;background-position: center center;padding:10px;/* clip-path: inset(100px 50px); *//* clip-path: circle(50px at 100px 100px); *//* clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%, 10% 10%, 40px 10px); */clip-path: url(#clipPath);/* background-size: cover; */transition:clip-path .4s;}.container:hover{/* clip-path: circle(80px at 100px 100px); */}</style>
</head>
<body><div class="container">你好，我是熊猫</div><svg><defs><clipPath id="clipPath"><!-- <circle cx="60" cy="60" r="50" fill="#34538b" /> --><polygon stroke="#979797" points="0.4921875 81.2070313 92.640625 81.2070313 121.601562 0.21875 153.648437 81.2070313 247.390625 80.7734375 173.394531 140.496094 200.308594 227.09375 121.601562 172.71875 53.4960937 227.09375 80.859375 140.496094"></polygon></clipPath></defs></svg>
</body>
</html>
3D-transform
变换 transform
3D变换
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>.container{margin:50px;padding: 10px;border: 1px solid red;width: 200px;height: 200px;position: relative;perspective: 500px;}#cube{width:200px;height:200px;transform-style: preserve-3d;transform: translateZ(-100px);transition:transform .4s;}#cube div{width: 200px;height:200px;position: absolute;line-height: 200px;font-size:50px;text-align: center;}#cube:hover{/* transform: translateZ(-100px) rotateX(270deg); */transform: translateZ(-100px) rotateX(90deg) rotateY(90deg);}.front{transform: translateZ(100px);/* transform: translateX(100px); *//* transform: translateX(100px) translateY(10px) rotate(25deg); *//* transform: rotate(25deg) translateX(100px) translateY(10px); */background:rgba(255,0,0,.3);}.back{/* transform: translateZ(-100px); */transform: translateZ(-100px) rotateY(180deg);background:rgba(0,255,0,.3);}.left{transform: translateX(-100px) rotateY(-90deg);background:rgba(0,0,255,.3);}.right{transform: translateX(100px) rotateY(90deg);background:rgba(255,255,0,.3);}.top{transform: translateY(-100px) rotateX(-90deg);background:rgba(255,0,255,.3);}.bottom{transform: translateY(100px) rotateX(90deg);background:rgba(0,255,255,.3);}</style>
</head>
<body><div class="container"><div id="cube"><div class="front">1</div><div class="back">2</div><div class="right">3</div><div class="left">4</div><div class="top">5</div><div class="bottom">6</div></div></div>
</body>
</html>
补充
如何用一个DIV画东西
- box-shadow无限投影
- ::before
- ::after
如何产生不占空间的边框
- box-shadow
- outline
如何实现圆形元素
border-radius:50%
如何实现IOS的圆角图标
clip-path:(svg)
如何实现半圆、扇形等图形
border-radius组合:有无边框，边框粗细，圆角半径
如何实现背景图片居中/不重复/改变大小
background-position
background-repeat
background-size(cover/contain)
如何平移/放大一个元素
transform:translateX(100px)
transform:scale(2)
如何实现3D效果
perspective:500xp
transform-style:preserve-3d
transform: translate rotate...
重学css 0x3 CSS效果相关推荐
- css html 双面打印_CSS语法与规则 — 重学CSS
我是三钻,一个在<技术银河>中等你们一起来终生漂泊学习. 点赞是力量,关注是认可,评论是关爱!下期再见 ! 前言 进入重学 CSS 的第一步,首先需要找到一些线索.我们在前面的课程中讲学习 ...
- 重学前端第一阶段完 钢琴项目(document.querySelector js改变css样式的3种方式 思路 成品)
菜鸟学完之后,总是感觉学了也还是不会,主要就是因为没有实践,不知道自己到底哪里有问题!虽然说我还没复习完,前端很大一部分都处于模糊阶段,但是感觉还是应该先尽力做一个简单的东西,把这几天学的都用进去,遇 ...
- 从零开始学前端：CSS元素模式的转换和CSS三大特性 --- 今天你学习了吗？（CSS：Day12）
从零开始学前端:程序猿小白也可以完全掌握!-今天你学习了吗?(CSS) 复习:从零开始学前端:复习课程 - 今天你学习了吗?(CSS:Day11) 文章目录 从零开始学前端:程序猿小白也可以完全掌握! ...
- 从零开始学前端：CSS复合选择器 --- 今天你学习了吗？（CSS：Day10）
从零开始学前端:程序猿小白也可以完全掌握!-今天你学习了吗?(CSS) 复习:从零开始学前端:CSS背景颜色 - 今天你学习了吗?(CSS:Day09) 文章目录 从零开始学前端:程序猿小白也可以完全 ...
- 从零开始学前端：CSS背景颜色 --- 今天你学习了吗？（CSS：Day09）
从零开始学前端:程序猿小白也可以完全掌握!-今天你学习了吗?(CSS) 复习:从零开始学前端:CSS字体属性和文本属性 - 今天你学习了吗?(CSS:Day08) 文章目录 从零开始学前端:程序猿小白 ...
- 从零开始学前端：CSS字体属性和文本属性 --- 今天你学习了吗？（CSS：Day08）
从零开始学前端:程序猿小白也可以完全掌握!-今天你学习了吗?(CSS) 复习:从零开始学前端:CSS引入 - 今天你学习了吗?(CSS:Day07) 文章目录 从零开始学前端:程序猿小白也可以完全掌握 ...
- 【重识 HTML + CSS】CSS 特性
CSS 特性 CSS 属性的继承 继承的注意点 CSS 属性的层叠 CSS 属性的优先级 优先级细节 CSS 属性使用总结 博文集合:[重识 HTML + CSS]知识点目录 本章 Gitee 代码: ...
- 【重识 HTML + CSS】CSS 选择器
CSS 选择器 selector 元素选择器 (type selectors):div {} 通用选择器 (universal selector):* {} id 选择器 (id selectors) ...
- 前端 学完HTML+CSS 自己动手写出QQ官网导航栏
HTML+CSS实现QQ头部栏 一.找到QQ官网界面 在浏览器搜索QQ,找到QQ官网 我们做的就是QQ官网的头部内容 二.准备 (一).创建一个index.html文件编写html代码 (二).建一个 ...
- 从零开始学前端 - 5. CSS常用属性
作者: 她不美却常驻我心 博客地址: https://blog.csdn.net/qq_39506551 微信公众号:老王的前端分享 每篇文章纯属个人经验观点,如有错误疏漏欢迎指正.转载请附带作者信息 ...
最新文章
- linux6.2下安装oracle11g,Oracle Linux6.2下安装Oracle11gR2.docx
- 网站SEO中内页标签该如何进行优化？
- jvm性能调优 - 05对象在JVM内存中的分配和流转
- HTTPS 原理详解
- 客户端（STS）连接服务器上redis时的问题
- Linux磁盘空间被占满？清空回收站试试！
- android 多线程 场景,精选Android初中级面试题 (三): 深探Handler，多线程，Bitmap
- TableView Within Alert
- linux 端口转发 udp,Linux Socat TCP/UDP端口转发及使用
- 著名互联网公司薪酬最全分析！
- gerrit is not registered in your account, and you lack ‘forge author‘ permission.
- 13.华为秋招一二面
- Webots+ROS学习记录（4）——六轮全地形移动机器人
- 2023河南师范大学计算机考研信息汇总
- 基于Echarts+HTML5可视化数据大屏展示—电子商务公共服务平台大数据中心
- 【算法】几个数组拆分题的算法（动态规划，矩阵递归和同余问题）
- 如何在UltraEdit中正确使用正则表达式
- 6-3 求一组数中的平均值及最大值 (10 分)
- 草坪新赛道，广和通助力割草机器人步入智能化新时代
- 《web结课作业的源码》中华传统文化题材网页设计主题——基于HTML+CSS+JavaScript精美自适应绿色茶叶公司(12页)