CSS效果

简介: 本内容介绍CSS核心技巧:用div绘制三角形、实现不占空间边框(box-shadow/outline)、IOS圆角图标、背景图控制、0.5px边框(transform缩放)、元素平移缩放及3D旋转硬币效果,深入讲解box-sizing与transform等属性应用。

CSS效果
1.使用div绘制图形(三角形)?
2.如何产生一个不占空间的边框?( box-sizing属性)?
[!NOTE]
知识点:IE和标准盒子模型的异同点
标准盒子模型:元素的width或height=content的width或height;
IE盒子模型:元素的width或height=content的width或height+padding2+border2;
2.1 使用box-shadow实现
2.2 使用outline实现
在元素边框边缘的外围绘制一条包围元素的线,包括outline-color、outline-style、outline-width三个子属性的设置,可缺省,无固定顺序。轮廓不占据页面空间,也不一定是矩形。即不会增加额外的width或者height。
3.如何实现IOS图标的圆角?
5.说下背景图的居中显示/重复/改变大小?
6.如何平移/放大一个元素?如何实现0.5px的边框?
[!NOTE]
知识点:transform的灵活使用


边框宽度1px


边框宽度0.5px




7.如何实现3D效果(旋转的硬币)?

/ 1. 设置一个透视变换,相机距离图像的距离 /
/ perspective : 500px /
/ 2. 设置视觉查看的样式 /
/ transform-style : perspective-3d /
/ 3. 变换图像 /
/ transform : translate rotate /

/旋转的硬币效果/
.money {
width: 100px;
height: 100px;
border-radius: 50px;
background-color: #48adff;
border: 2px solid #000;

/*开启3D效果*/

perspective: 500px;
transform-style: preserve-3d;
/*transform : rotateY(180deg);*/
animation : rotate 2s linear infinite;

}

@keyframes rotate {
from {
transform : rotateY(0deg);
}
to {
transform : rotateY(360deg);
}
}

相关文章
|
7月前
|
SQL 安全 网络协议
常见的网络攻击
常见网络攻击包括恶意软件、网络钓鱼、中间人攻击、DDoS攻击、SQL注入、零日漏洞和DNS隧道等。攻击者利用漏洞或社会工程手段入侵系统,窃取数据、破坏服务或控制设备。防范需加强安全意识与技术防护。
|
7月前
|
前端开发 JavaScript
CSS动画
CSS动画通过transition、keyframe和逐帧实现,支持平移、旋转、缩放等效果。关键帧动画控制更精细,无需状态变化;过渡动画依赖属性变化。性能良好,优于部分JS实现。文中的轮播图利用keyframes与left定位实现无缝切换,流畅且兼容性强。
|
7月前
|
存储 JSON NoSQL
MongoDB常用命令
本文介绍MongoDB常用命令,涵盖数据库创建与删除(use、show dbs、dropDatabase)、集合操作(createCollection、drop)及文档的增删改查(insert、find、update、remove)。详解分页查询中limit、skip、sort用法及注意事项,适用于文章评论等数据管理场景。
|
7月前
|
JavaScript 前端开发 算法
React框架
React 是一个用于构建用户界面的 JavaScript 库,核心优势包括虚拟 DOM、组件化开发、服务端渲染支持及优秀的性能优化机制。配合 Redux 可实现状态集中管理,其三大核心为 action、reducer 和 store,强调不可变数据与纯函数。虚拟 DOM 与 Diff 算法结合,通过同层比较和 key 机制最小化 DOM 操作,提升渲染效率。React 支持函数组件与类组件,推崇展示组件与容器组件分离,便于维护。与 Vue 相比,React 更灵活但需手动优化更新,且依赖 JSX。整体设计思想融合函数式编程,强调可预测的状态管理和高效 UI 更新。
|
7月前
|
JSON 缓存 前端开发
什么是跨域
跨域是指浏览器出于安全考虑,限制不同源之间的资源访问。CORS(跨域资源共享)是W3C标准,通过服务器设置响应头,允许浏览器向跨源服务器发送XMLHttpRequest请求。它分为简单请求与非简单请求,后者需先发起OPTIONS预检。相比仅支持GET的JSONP,CORS支持所有HTTP方法,更灵活安全,是现代跨域解决方案的首选。(238字)
|
7月前
|
Linux 数据安全/隐私保护 虚拟化
虚拟机安装(CentOS7)
本教程介绍如何在VMware Workstation上安装CentOS 7虚拟机。需准备CentOS 7镜像和VMware软件(提供百度云下载链接),参照指南创建虚拟机,安装时默认用户名为root,密码由用户自定义,适合初学者快速搭建Linux环境。
|
7月前
|
安全
CSRF攻击
CSRF(跨站请求伪造)攻击利用用户登录态,诱导其发起非自愿的请求,实现盗取资金、冒发帖子等恶意操作。攻击者通过钓鱼页面伪造请求,借助用户身份执行未授权操作。防御手段包括:使用Token验证、SameSite Cookie、检查Referer、避免GET修改数据等,可有效降低风险。
|
7月前
|
编解码 前端开发 JavaScript
Bootstrap
Bootstrap是一款流行的前端框架,优点是结构清晰、支持响应式布局,可快速开发;缺点是定制复杂、体积较大。响应式通过media query实现,定制可通过覆盖类、修改变量或重构源码。面试常考其原理模拟。
|
7月前
|
前端开发 JavaScript 开发者
CSS预处理器
CSS预处理器如Sass、Less,通过引入变量、嵌套、混合等编程特性,提升CSS的可读性与维护性。经编译生成标准CSS,增强代码复用,支持模块化开发,但需学习成本与构建流程。scss用$定义变量,支持条件循环;less用@,无输出配置,功能较弱。
|
7月前
|
存储 Java 数据库
微服务概述
微服务架构将单体应用按业务领域拆分为多个独立、自治的小型服务,各服务可独立开发、部署、扩展,技术栈灵活,通过轻量级通信协作。相比单体架构,微服务职责清晰、边界明确,提升可维护性与扩展性,但带来运维复杂、分布式事务等挑战。需结合SpringCloud、Docker等技术实现,适用于复杂、高并发的互联网系统演进。

热门文章

最新文章