首页 > 其他分享 >CSS杂记

CSS杂记

时间:2023-11-24 11:13:24浏览次数:31  
标签:居中 center px 阴影 杂记 border CSS justify

.bigClass {     margin: 200px auto; 保证金:200 px自动;     width: 500px; 宽度:500 px;     height: 500px; 高度:500 px;     background-color: yellow; 背景颜色:黄色;     display: flex; 显示:柔体;     /* 控制子容器位置 */     align-items: center; align-items:居中;     /* 水平居中 */     justify-content: center; justify-content:center;     /* justify垂直居中 */     box-shadow: 0px 1px 30px black; 盒阴影:0 px 1 px 30 px黑色;     /* 阴影 参数(水平阴影的位置,垂直阴影的位置,模糊距离,阴影的颜色) */     border-radius: 10px; border-radius:10px;     /* 圆角 */ }

效果图

 

标签:居中,center,px,阴影,杂记,border,CSS,justify
From: https://www.cnblogs.com/lw8014/p/17853297.html

相关文章

  • css 水平垂直居中的几种方法
    水平垂直居中的几种方式记录一下容器内只有单一元素时居中的几种方式<divstyle="width:300px;height:300px"class="wrap"><divstyle="width:100px;height:100px"class="box"></div></div>1.容器flex,调整内部轴线.wrap{di......
  • CSS 尺寸单位概述
    在本文中,我们将探讨CSS尺寸单位的四大类别。我们将了解这些尺寸单位的用途、它们的最佳工作原理,以及如何在每种情况下选择最佳尺寸单位,从而在各种媒体和设备尺寸下优化我们的布局。关于CSS尺寸单位CSS提供了多种指定元素大小或长度的方式,其中一些更为直观。CSS单位可分......
  • Tailwind CSS 解决了什么问题?
    从页面样式设计的颗粒度Granularity来谈起元素颗粒度我们知道,构成网页页面元素的最底层,最原始的东西就是HTML&CSS为每一个元素指定不同的内联inline-style或者class来控制它的呈现方式,最细程度可以到元素的style属性来控制,颗粒度停留在元素<!DOCTYPEhtml><htmll......
  • 纯CSS实现炫酷文本阴影效果
    如图所示,这是一个文本阴影效果,阴影有多个颜色,鼠标悬停时文本阴影效果消失,文本回到正常的效果。让我们逐步分解代码,看看如何使用纯CSS实现这个效果的。基于以上动图可以分析出以下是本次实现的主要几个功能点:文本有多个颜色的阴影的效果文本有空心镂空的效果鼠标悬停时文本回......
  • CSS选择器
    CSS选择器是用来选择需要改变样式的HTML元素的模式。到CSS3为止,支持的选择器类型有6种,包括标签选择器、派生选择器(上下文选择器)、id选择器、class选择器、属性选择器和通配符*选择器。以下是这六种选择器的简要介绍:标签选择器:通过HTML元素的标签名来选择元素。派生选择器(上下文选择......
  • Vue动态改变css样式的3种方法
    在网页开发中,我们经常会遇到动态的改变某个元素样式的需求,在vue里如何实现呢?官网上其实写的很详细了,对象语法,数组语法等。我自己总结了在开发中,个人用的比较多的三种方式1.class,三元表达式:class="[occupation==='请选择'?'lh60':'lh61']"css.red{color:red;}.blue......
  • 纯CSS动态渐变文本特效
    如图所示,这是一个炫酷的文本渐变效果,如同冰岛的极光一般。本次的文章让我们逐步分解代码,了解其实现原理。基于以上动图效果可以分析以下是本次动效实现的主要几点:文本中有多个颜色的动画每个颜色显示的半径不同,有大有小整体动画是有规律的重复进行着实现过程接下来开始正......
  • 一句话网页变灰 -css
    文档说明:只记录关键地方;发布时间:2023-11-19试验环境:chromium内核浏览器意义:记录一下怎么实现的工具:编写CSShtml{filter:grayscale(100%);}参考文档网站都变成灰色了,它是怎么实现的?一句话网页变灰百度一句话网页变灰谷歌......
  • css-1
     ......
  • 纯CSS3实现圆圈动态发光特效动画
    参考文档:https://www.cnblogs.com/cyfeng/p/12625606.htmlhtml文件: <div class="item"></div>css文件:     <!DOCTYPEHTML><html><head><title>纯CSS3实现圆圈动态发光特效动画</title><style>bo......