CSS3新增样式

1,圆角边框

在CSS3中,新增了圆角边框样式,这样我们的盒子就可以变圆角了

border-radious属性用于设置元素的外边框圆角

语法:

border-radious:length;

radious 半径(圆的半径)原理:(椭)圆与边框的交集形成圆角效果

注意:

        参数值可以为数值或者百分比的形式

        如果是正方形,想要设置为一个圆,把数值修改为高度或者宽度的一半即可,或者直接写为50%

        如果是个矩形,想要设置为一个圆角矩形,把数值修改为高度的一半就可以做

        该属性是一个简写属性,可以设置不同的圆角

        定义四个值,分别代表左上角,右上角,右下角,左下角(顺时针)

        定义两个值,代表左上角 、右下角和右上角、左下角(呈对角线型)

        分开写:border-top-left-radious、border-top-right-radious、border-bottom-left-radious、border-bottom-right-radious

2,盒子阴影

 CSS3中新增了盒子阴影,我们可以使用box-shadow属性为盒子添加阴影

语法:

box-shaow:h-shaow  v-shaow  blur  spread  color  inset;

值                                                                                       描述

h-shaow                                                       必需,水平阴影的位置,允许负值

v-shaow                                                       必需,垂直阴影的位置,允许负值

blur                                                               可选,模糊距离(影子模糊程度)

spread                                                          可选,阴影的尺寸(阴影的大小)

color                                                             可选,阴影的颜色,请参阅CSS颜色值

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

box-shaow:10px 10px 10px 10px rgba(0,0,0,.3);

注意:

1,默认的是外阴影(outset),但是不可以写这个单词,否则导致阴影无效

2,盒子阴影不占用空间,不会影响其他盒子排列

3,文字阴影

 在CSS3中,我们可以使用text-shadow属性将阴影应用于文本

语法:

text-shadow:h-shadow  v-shadow  blur  color;

值                                                                        描述

h-shadow                                                       必需,水平阴影的位置,允许负值

v-shadow                                                       必需,垂直阴影的位置,允许负值

blur                                                                 可选,模糊的距离

color                                                               可选,阴影的颜色,参阅CSS颜色值

 

 

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/235373.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

校园圈子交友系统,APP小程序H5,三端源码交付,支持二开!实名认证,大V认证,地图找伴,二手平台!

校园圈子交友系统,是属于自主定义开发的系统,内容有很多,先截取一些给大家看看,让大家更多的了解本系统,然后再做评价! 校园后端下载地址:校园圈子系统小程序,校园拼车,校…

XM平台官网开户注册流程图解

注册前准备 在进行XM外汇官网注册之前,首先需要准备必要的信息,包括个人身份信息、联系方式以及相关财务信息。确保这些信息的准确性是保证注册流程顺利进行的关键。 一、要访问XM外汇官方网站,首先打开您的浏览器。在浏览器的地址栏中输入…

数据分析基础之《numpy(6)—合并与分割》

了解即可,用panads 一、作用 实现数据的切分和合并,将数据进行切分合并处理 二、合并 1、numpy.hstack 水平拼接 # hstack 水平拼接 a np.array((1,2,3)) b np.array((2,3,4)) np.hstack((a, b))a np.array([[1], [2], [3]]) b np.array([[2], […

【Linux】macOS下使用scp命令编写脚本上传文件至服务器

使用时需要输入服务器密码 #!/bin/bash# 检查传递给脚本的参数数量 if [ "$#" -ne 2 ]; thenecho "Usage: $0 <本地文件路径> <服务器文件夹路径>"exit 1 fi# 接收命令行参数 local_file"$1" remote_path"$2"# 定义远程服…

华为OS与麒麟OS:华为自研操作系统的对决

导言 在移动操作系统领域&#xff0c;华为OS和麒麟OS代表了华为在自主研发方面的努力。本文将深入探讨这两个操作系统的特点、竞争关系以及它们在用户体验、生态系统建设等方面的差异。 1. 背景与起源 华为OS的诞生&#xff1a; 华为OS是华为公司为应对外部环境而自主…

英国呼叫中心的功能

随着互联网的普及和信息技术的发展&#xff0c;越来越多的企业需要通过呼叫中心来管理客户关系和提供售后服务。英国作为主要的海外外贸市场之一&#xff0c;也是呼叫中心面向客户服务的重要国家。 英国呼叫中心的功能 英国呼叫中心的功能大致分为四类&#xff1a;接听电话、…

PCL 点云匹配 3 之 (非线性迭代点云匹配)lM-ICP

一、IM迭代法 PCL IterativeClosestPointNonLinear 非线性L-M迭代法-CSDN博客 Matlab 非线性迭代法&#xff08;3&#xff09;阻尼牛顿法 L-M-CSDN博客 MATLAB实现最小二乘法_matlab最小二乘法-CSDN博客

开源键盘工程QMK

一、Qmk简介 目录 一、Qmk简介 二、Qmk入门指导文档 三、QMK配置器 四、QMK层的概念 TMK原先是由Jun Wako设计实现

爬虫工作量由小到大的思维转变---<第十八章 Scrapy请求处理与返回策略>

前言: 今天我们来聊一聊Scrapy爬虫中的请求处理与返回策略。你有没有遇到过一个Item需要由多个请求组成的情况&#xff1f;如果是的话&#xff0c;那么对请求的处理和决定是否返回处理过的Item对象就变得格外重要。看一下Scrapy中的相关策略&#xff0c;实现爬虫的完美康复。 …

解锁商业宝藏:迅软科技答疑保护商业秘密的重要性

商业秘密指不为公众所知悉、具有商业价值并经权利人采取相应保密措施的技术信息、经营信息等商业信息&#xff0c;一旦泄露可能会给公司带来极大的经济损失和竞争压力&#xff0c;保护商业秘密既能维护企业自身合法权益&#xff0c;也能保障市场经济长期健康发展需求。 保护商…

用户管理第2节课--idea 2023.2 后端--实现基本数据库操作(操作user表)

一、模型user对象>和数据库的字段关联 & 自动生成 【其中涉及删除表数据&#xff0c;一切又从零开始】 二、模型user对象>和数据库的字段关联 2.1在model文件夹下&#xff0c;新建 user对象 2.1.1 概念 大家可以想象我们现在的数据是存储在数据库里的&…

【Spring Security】打造安全无忧的Web应用--入门篇

&#x1f973;&#x1f973;Welcome Huihuis Code World ! !&#x1f973;&#x1f973; 接下来看看由辉辉所写的关于Spring Security的相关操作吧 目录 &#x1f973;&#x1f973;Welcome Huihuis Code World ! !&#x1f973;&#x1f973; 一.Spring Security是什么 1.概…

【Java】BigDecimal 比较自动化页面获取数据的大小

jwensh2023.12.20 使用背景 对 web3 相关的数据进行计算的时候&#xff0c;需要进行大小加减计算&#xff0c;UI 自动化过程需要将数据转为自然数&#xff1b;页面获取的数据会有千分位 、高精度(18位) /*** Compares this {code BigDecimal} with the specified* {code BigDe…

Open CV 图像处理基础:(二)从基本概念到实践操作

Open CV 图像处理基础&#xff1a;从基本概念到实践操作 一、引言 图像处理是计算机视觉领域的一个重要分支&#xff0c;它涉及对图像的各种操作和处理。了解图像的基本概念、读取和显示方法以及基本操作是图像处理的基础。本文将通过示例文章的形式&#xff0c;帮助初学者逐…

Spring Boot3通过GraalVM生成exe执行文件

一、安装GraalVM 1、官网&#xff1a;https://www.graalvm.org/downloads/ 2、配置环境变量 2.1、环境变量必须使用JAVA_HOME&#xff0c;否则会出现问题 2.2、在系统变量配置Path,%JAVA_HOME%\bin&#xff0c;注意必须放在顶部第一位 2.3、配置jdk的环境变量&#xff0c;在P…

【Spring实战】创建第一个项目

文章目录 使用 Spring Initializr 创建第一个项目1. 打开官网2. 填写信息3. 生成工程4. 解压工程5. 导入 IDEA6. 编写 Hello world7. 启动项目8. 访问验证9. 详细代码最后 Spring 是一个强大且广泛使用的 Java 开发框架&#xff0c;提供了全面的基础设施和工具&#xff0c;用于…

如何将图片转为PDF

问题描述&#xff1a;如何将图片转为PDF&#xff0c;有时需要将纸质文档扫描成PDF&#xff0c;然后上传到网上。 解决办法&#xff1a;平时使用的方法是将图片插入到word文件中&#xff0c;然后将图片设置为浮于文字下方&#xff0c;然后调整图片的大小&#xff0c;铺满整个wo…

案例094:基于微信小程序的图书馆自习室座位预约管理系统

文末获取源码 开发语言&#xff1a;Java 框架&#xff1a;SSM JDK版本&#xff1a;JDK1.8 数据库&#xff1a;mysql 5.7 开发软件&#xff1a;eclipse/myeclipse/idea Maven包&#xff1a;Maven3.5.4 小程序框架&#xff1a;uniapp 小程序开发软件&#xff1a;HBuilder X 小程序…

mysql:查看线程缓存中的线程数量

使用命令show global status like Threads_cached;可以查看线程缓存中的线程数量。 例如&#xff0c;查询线程缓存中的线程数量如下&#xff1a; 然后启动应用程序&#xff0c;使用连接&#xff0c;查询如下&#xff1a; 由查询结果可以看到&#xff0c;线程缓存中的线程数量…

2023_Spark_实验三十二:消费Kafka数据并保存到MySQL中

实验目的&#xff1a;掌握Scala开发工具消费Kafka数据&#xff0c;并将结果保存到关系型数据库中 实验方法&#xff1a;消费Kafka数据保存到MySQL中 实验步骤&#xff1a; 一、创建Job_ClickData_Process 代码如下&#xff1a; package examsimport org.apache.kafka.clien…