CSS：装饰、垂直对齐方式、光标类型、边框圆角、overflow、元素隐藏、透明度、边框合并、画三角形、选择器拓展

最新推荐文章于 2022-11-05 12:23:00 发布
最新推荐文章于 2022-11-05 12:23:00 发布
阅读量110 收藏
点赞数
分类专栏： HTML5+CSS 文章标签： css 前端 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43472877/article/details/127408187
版权

文章目录

1. 垂直对齐方式

文字对齐问题

在这里插入图片描述
在这里插入图片描述

（拓展）项目中 vertical-align 可以解决的问题

在这里插入图片描述

2. 光标类型

在这里插入图片描述
在这里插入图片描述

3. 边框圆角

在这里插入图片描述
在这里插入图片描述

边框圆角的常见应用

在这里插入图片描述
在这里插入图片描述

4. overflow溢出部分显示效果

在这里插入图片描述

5. 元素本身隐藏

在这里插入图片描述

6.（拓展）元素整体透明度

在这里插入图片描述
在这里插入图片描述

7. （拓展）边框合并

在这里插入图片描述
在这里插入图片描述

8.（拓展）用CSS画三角形技巧（面试题）

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

9. 选择器拓展

链接伪类选择器

在这里插入图片描述

焦点伪类选择器

在这里插入图片描述
在这里插入图片描述

属性选择器

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

_七七
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS拓展案例，包含定位，光标，圆角边框，透明度opacity,边框合并，焦点伪类选择器，属性选择器
11-28
本案例涉及了多个核心CSS概念，包括定位、光标、圆角边框、透明度、边框合并以及焦点伪类选择器和属性选择器。让我们逐一深入探讨这些知识点。 1. **定位（Positioning）**：在CSS中，元素的位置可以通过`position`...
CSS圆角边框制作指南与实例
12-13
在CSS中创建圆角边框，对于前端开发者来说，一直是一项挑战。虽然圆角边框在视觉上可以增加页面的柔和感和现代感，但在早期的CSS标准中，实现这一效果并不直观，往往需要借助复杂的技术或者使用大量的切图。随着CSS3...
CSS6，圆角边框及阴影和经验分享，方块定位练习讲解，overflow及父类边框塌陷问题
qq_50034199的博客
02-26 112
圆角边框及阴影和经验分享 源码之家：现成的登录页面 www.mycodes.net 后台管理系统：模版之家 www.cssmoban.com 门户网站 模版之家 方便用于网站的开发使用 方块定位练习讲解 overflow及父类边框塌陷问题 ...
用CSS实现圆角边框效果的方法
cok8420的博客
08-30 143
用CSS实现圆角边框效果的方法<!--b{display:block;overflow:hidden;height:1px;}.htmer_circle1{margin:0 2px; background:#333;}.h...
CSS学习文档（四）：圆角边框、盒子阴影、浮动、学成在线案例
weixin_42044763的博客
05-12 1525
一、圆角边框，盒子阴影 1.圆角边框 在CSS3中新增了圆角边框的样式，这样盒子就可以变成圆角。语法是border-radius: length; 其中参数length表示圆角的半径，半径越大说明在角上画的⚪越大，那么圆角矩形的边框也就越⚪ border-radius: 20px; 如何画⚪？前提如果是正方形的盒子，那么length的值是宽高的一半即可，或者直接写50% border-radius: 50%; 如果想搞一个圆角矩形，那么length设置成高度的一半就可以了。 当然，也可以分别设置四个角
overflow不隐藏圆角部分
dk8600的博客
03-15 389
1.overflow属性不隐藏绝对定位到子元素，如果父元素不加相对或绝对定位 2.父元素应用圆角属性border-radius，且子元素应用transform属性，不隐藏圆角部分 解决：父元素插入如下css position: relative; z-index: 1; transform:translate3d(0,0,0); 转载于:https://w...
有关CSS的overflow和border-radius的那些事，你的圆角被覆盖了吗？
weixin_33737134的博客
09-28 885
事件起因 最初是网友的一个提问，来自于我的知识星球社区：   说实话，不得不佩服这个网友的眼力，这么小的细节都能发现。不过这也正是 FineUI 一直前进的动力，来自社区的监督和促进。   从截图上看，貌似圆角部分被内部节点覆盖了。换句话说：外部的圆角没有截断内部的元素！   由于这位网友测试的是 Cupertino 主题，圆角只有 6px，不大明显：     换成 L...
css 圆角边框
09-25
CSS圆角边框指的是在网页布局中，元素的边框可以设置为圆角形式，而不是传统直角的样式。这在创建用户界面元素时，如按钮、卡片等，能够带来更为美观和友好的视觉效果。CSS3的出现让这一功能变得简单，因为它提供了...
CSS3教程(2):网页边框半径和网页圆角
12-09
在CSS3中，网页设计者可以使用`border-radius`属性轻松地为元素添加圆角，从而解决了以往通过切图和复杂CSS布局实现圆角的繁琐问题。本教程将详细介绍如何利用CSS3的`border-radius`属性来创建网页边框的圆角效果，...
border-radius以外的CSS圆角边框制作方法
09-24
CSS圆角边框的制作方法大致可以分为两类：一类是使用CSS3的border-radius属性，另一类是不使用border-radius属性。border-radius属性用于设置元素边框的圆角，语法简洁，易于实现。然而，由于某些老版本浏览器（如IE...
【CSS应用篇】——CSS如何实现圆角边框
最新发布
m0_64231944的博客
11-05 4336
实际应用中如何使用圆角属性及注意点；
overflow:hidden;隐藏不成功,尤其是圆角时
ljw_jiawei的博客
07-19 1668
试试添加position:relative; 试试添加z-index:1;
css overflow和border-radius一起用 解决圆角和滚动条一起用的问题
weixin_30753873的博客
07-28 824
这是同时使用时的问题,如下图: 解决办法:外层套一个div,设置overflow:hidden,和border-radius内层设置overflow-y:auto;高度100%;效果如下图 转载于:https://www.cnblogs.com/jiafeimao-dabai/p/7250109.html...
CSS设置DIV边框为圆角，添加背景色溢出的问题
baliang9989的博客
09-01 2045
这么几天需要做一个类似于层级展示的东西，最后一层需要做一些div框来展示数据，我用css设置了div的边框为圆角，但是添加背景色的时候颜色溢出，覆盖了四个角的圆弧，效果如图所示： css代码如下： .demo{ position: absolute; top:0; height:100% ; border:1px solid #000;...
CSS实现渐变圆角边框
lin123_00的博客
07-08 4716
渐变边框可以使用border-image，但带有圆角的渐变边框单靠border-image却无法实现，那有哪些方法可以实现圆角渐变边框呢？ css实用小知识，你肯定用得上 方案一：使用border-image+clip-path实现 <style> .radius-gradient-border1{ max-width: 300px; padding: 8px; border: 5px solid transparent; border-image:
HTML 表格table tr td、表头标题、表结构、合并单元格
热门推荐
七七的博客
03-04 1万+
表格的主要作用 表格主要用于显示、展示数据，因为它可以让数据显示的非常的规整,可读性非常好。 特别是后台展示数据的时候,能够熟练运用表格就显得很重要。 一个清爽简约的表格能够把繁杂的数据表现得很有条理。 表格不是用来布局页面的，而是用来展示数据的。 <table> <tr> <td>单元格内的文字</td> </tr> </...
HTML图像标签<img>和图像相对路径、绝对路径
七七的博客
03-03 7257
图像标签和路径 图像标签 在HTML标签中， 标签用于定义HTML页面中的图像。 <img src="图像URL"> 单词image的缩写,意为图像。 src是标签的必须属性,它用于指定图像文件的路径和文件名。 图像标签的其他属性: src 图片路径 必须属性 alt 文本 替换文本。图像不能显示时显示的文字。 title 文本 提示文本。鼠标放到图像上，提示的文字 wi...
HTML 列表标签、有序列表、无序列表、自定义列表dl dt dd
七七的博客
03-04 5545
自定义列表(重点) 在HTML标签中，< dl>标签用于定义描述列表(或定义列表) , 该标签会与< dt> (定义项目/名字)和< dd> (描述每一个项目/名字) 一起使用。 其基本语法如下: <dl> <dt>名词1</dt> <dd>名词1解释1</dd> <dd>名词1解释2...
HTML+CSS：rem、vw / vh移动适配、媒体查询
七七的博客
10-18 3728
使用flexiblejs配合rem实现在不同宽度的设备中，网页元素尺寸等比缩放效果。目前rem布局方案中，将网页等分成10份，HTML标签的字号为视口宽度的1/10。如68px的单位，在375width的页面中，rem单位为：68/37.5。手机屏幕大小不同，分辨率不同，如何设置不同的HTML标签字号？vw单位的尺寸=px单位数值/(1/100视口宽度)vh单位的尺寸=px单位数值/(1/100视口高度)适配 68px * 29px 的盒子使用vw。适配 68px * 29px的盒子使用vh。
CSS选择器详解：元素、关系、属性、伪元素与伪类
"CSS选择器.pdf" 在前端开发中，CSS（Cascading Style Sheets）是用于控制网页元素样式的重要工具。CSS选择器是CSS的核心组成部分，它允许开发者精确地定位到HTML或XML文档中的特定元素，从而为其应用样式。CSS选择...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值