css:修改盒子样式

news/2024/11/18 20:17:31/

圆角边框

css3中新增了圆角边框样式,这样我们的盒子就可以长得奇形怪状了

像csdn上的发布就是圆角边框

还有这些

css"> .x,.y {background-color: cornflowerblue;width: 200px;height: 200px;margin: 0 auto;text-align: center;border-radius: 10px;}

10px是什么意思?

在四角画一个半径为10px的圆和矩形相切,切下来的结果就是外边框圆角

调整半径:

css">  .x,.y {background-color: cornflowerblue;width: 200px;height: 200px;margin: 0 auto;text-align: center;border-radius: 100px;//是方形边长的一半}

我们也可以用百分比的方式来设置:

css">border-radius: 50%;

50%的意思是宽度和高度的一半,等价于50%

如果想要椭圆就设置为50%

(孟德斯鸠(bushi))

想要两边为圆角就设置为高的一半

css"> .x,.y {/* background-color: cornflowerblue; */background-image: url(微信图片_20241113202301.jpg);background-repeat: no-repeat;background-size: cover;width: 300px;height: 200px;margin: 0 auto;text-align: center;border-radius: 150px;}

给四个角设置不同的圆角也可以用到类似padding的写法:

css">border-radius: 50px 100px 150px 200px;

盒子阴影

像这种有种浮起的感觉,就是盒子阴影的效果

css"><!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;}body {background-color: #222222}.box {margin: 100px auto;width: 300px;height: 450px;/* text-align: center; */background-color: #f5f5f5;border-radius: 10px;}.box .review {font-size: 14px;color: rgb(39, 34, 34);padding: 0 20px;margin-top: 10px;}.box img {width: 100%;border-radius: 10px;}.box .appraise {font-size: 10px;color: darkgray;margin: 20px 20px;}.box div h3 {display: inline-block;font-size: 20px;width: 200px;margin: 10px 0px 0px 20px;margin-top: 10px;font-weight: 400;}.box div h3 a {text-decoration: none;color: black;}.box div span {margin-top: 10px;color: #ff6700;margin-right: 20px;}.box div .dre {margin-top: 10px;color: darkgray;font-style: normal;/* margin: 0px 0px 0px 3px; */}.box:hover {box-shadow: 0px 0px 10px 1px rgba(255, 204, 34, 0.5);//设置盒子阴影效果border: 1px solid #ffcc22;}</style>
</head><body><div class="box"><img src="微信图片_20241113155824.jpg" alt="菠萝吹雪"><p class="review">这是一只死到临头还在犯贱的菠萝吹雪,也可能是一个补不完deadline的励志轩,也是一个知道周末要考概率论的荷叶饭</p><p class="appraise">来自XUPT的评价</p><div><h3><a href="#">荷叶饭尸块秒杀价...</a></h3><em class="dre">|</em><span>9.9元</span></div></div>
</body></html>

下面这行从左到右分别表示的是:

h-shadow:水平阴影的位置,允许负值(必须值)

v-shadow:垂直阴影的位置,允许负值(必须值)

blur:模糊距离(可选)

spread:阴影的尺寸(可选)

color:阴影的颜色(可选)

inset:将外部阴影(outset)改为内部阴影(可选)

盒子阴影不占用盒子的空间

css">  box-shadow: 0px 0px 100px 10px rgba(255, 204, 34, 0.5) inset;//设置盒子阴影在内部的效果

泛黄的菠萝吹雪,阴影向内

outset是默认的,不能这么写

文字阴影

和盒子阴影差不多

h-shadow:水平阴影的位置,允许负值(必须值)

v-shadow:垂直阴影的位置,允许负值(必须值)

blur:模糊距离(可选)

color:阴影的颜色(可选)

text-shadow: 10px 10px 10px black;

好恶心。。。


http://www.ppmy.cn/news/1548076.html

相关文章

基于K8S1.28.2实验rook部署ceph

基于K8S1.28.2实验rook部署ceph 原文链接&#xff1a; 基于K8S1.28.2实验rook部署ceph | 严千屹博客 Rook 支持 Kubernetes v1.22 或更高版本。 rook版本1.12.8 K8S版本1.28.2 部署出来ceph版本是quincy版本 主机名ip1(NAT)系统新硬盘磁盘内存master1192.168.48.101Centos7.910…

【从零开始的算法学习日记✨优选算法篇✨】第一章:双指针技巧

✨放在开头&#xff1a; 【从零开始的算法学习日记】系列将包含四个篇章&#xff0c;分别是【优选算法篇】、【递归/搜索/回溯算法篇】、【动态规划篇】以及【贪心算法篇】&#xff0c;每一篇章下面都会有若干章节以及数十道例题详解&#xff0c;博主计划在明年开春前陆续出完这…

# JAVA中的Stream学习

JAVA中的Stream 1、Stream是什么? Stream 是 Java 8 引入的一个新的抽象层&#xff0c;用于处理数据集合。它可以让你以声明式的方式处理数据&#xff0c;类似于 SQL 语句的查询方式。 2、Stream能够做什么? 过滤&#xff1a;通过条件筛选数据。映射&#xff1a;转换数据…

30 秒!用通义灵码画 SpaceX 星链发射流程图

不想读前人“骨灰级”代码&#xff0c; 不想当“牛马”程序员&#xff0c; 想像看图片一样快速读复杂代码和架构&#xff1f; 来了&#xff0c;灵码又加新 buff&#xff01;&#xff01; 通义灵码支持代码逻辑可视化&#xff0c; 可以把你的每段代码画成流程图。 你可以把…

Java基础-组件及事件处理(中)

(创作不易&#xff0c;感谢有你&#xff0c;你的支持&#xff0c;就是我前行的最大动力&#xff0c;如果看完对你有帮助&#xff0c;请留下您的足迹&#xff09; 目录 BorderLayout布局管理器 说明&#xff1a; 示例&#xff1a; FlowLayout布局管理器 说明&#xff1a; …

Vue 与 React 前端框架差异对比及案例分析

一、设计理念 1.Vue&#xff1a; Vue 被设计为渐进式框架&#xff0c;能够自底向上逐层应用。这意味着可以将其灵活地应用于现有项目的一部分&#xff0c;无需对整个项目进行大规模重构。强调数据驱动视图&#xff0c;通过响应式数据绑定&#xff0c;当数据发生变化时&#x…

十五届蓝桥杯赛题-c/c++ 大学b组

握手问题 很简单&#xff0c;相互牵手即可&#xff0c;但是要注意&#xff0c;第一个人只能与其他49个人牵手&#xff0c;所以开头是加上49 #include <iostream> using namespace std; int main() {int cnt0;for(int i49;i>7;i--){cnti;//cout<<i<<&quo…

ctfshow-web入门-SSTI(web361-web368)上

目录 1、web361 2、web362 3、web363 4、web364 5、web365 6、web366 7、web367 8、web368 1、web361 测试一下存在 SSTI 注入 方法很多 &#xff08;1&#xff09;使用子类可以直接调用的函数来打 payload1&#xff1a; ?name{{.__class__.__base__.__subclasses__…