分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 运营维护

CSS3-2

发布时间:2023-09-06 01:55责任编辑:熊小新关键词:CSS

倒圆角

<!DOCTYPE html>
<html lang="en">
<head>
???<meta charset="UTF-8">
???<title>Document</title>
</head>
<body>

???<h1>圆角边框 —— border-radius IE9</h1>
???<!-- border-radius 是复合属性 -->
???border-radius: 20px;<!-- 四个角圆的半径为20px -->
???border-radius: **px **px **px **px;<!-- 和padding,margin用法相同 -->
???border-top-left:;
???border-top-right:;
???border-bottom-left:;
???border-bottom-right:;
???<!-- 还可以百分比变化 -->
???border-radius: 50%;

<h1>阴影 —— box-shadow和text-shadow</h1>
box-shadow和text-shadow
???box-shadow标准参数5个 IE9开始兼容
???box-shadow: 6px 6px 10px 10px red;
???向右偏移值 向下偏移值 模糊半径 延展宽度 颜色
???
???box-shadow: 6px 6px 10px 10px red,
???6px 6px 10px 10px blue,
???inset 6px 6px 10px 10px yellow,
???inset 6px 6px 10px 10px green;
<p>
注:
1.默认向外扩展阴影,如需向内,加 inset。
2.对于一个盒子,可以叠加使用阴影,并可以同时内外阴影。
</p>

text-shadow: 文字阴影 四个参数 少了延展值 ?IE10兼容
使用,同上。
  

</body>
</html>

CSS3-2

原文地址:https://www.cnblogs.com/hangege/p/9078181.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved