css实现图片效果功能——圆角叉号删除键

最新推荐文章于 2022-05-06 18:10:12 发布
最新推荐文章于 2022-05-06 18:10:12 发布
阅读量5.2k 收藏 3
点赞数
分类专栏： css 文章标签： html css 图形
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_34376715/article/details/79160760
版权
  1. 要求是不使用图片，实现右上角删除键功能
  2. 实现流程：
    a. 使用输入法工具（比如搜狗输入法工具箱，也可以使用电脑自带的“字符映射表”）找到符号“ × ”；
    b. 在一个div块级元素中放置符号“ × ”，使用strong加粗，设置div背景无颜色，边框颜色和字符颜色一致，都是红色；
    c. 调整div的width、border-radius、font-size和text-align（使字符居中），不用设置div的高度；
    d. 设置cursor：pointer（当鼠标悬浮在div上时，变成手势，增加按键真实感）。

具体实现代码如下：
代码

效果图：
效果图

慢语
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
纯CSS3实现圆角效果
卜小娴的博客
10-01 1011
首先本文要实现的尖角效果图为： 这里我们使用的是CSS3的伪元素:before和:after。在此之前我们先看下面两段代码和对应效果图：//css代码 div{ width: 0; height: 0; border-style: solid; border-width: 10px 25px; border-color:#f00 #ff0 #0f
圆角DIV 并且不用图片
03-28
标题“圆角DIV 并且不用图片”指的是在网页设计中创建带有圆角的HTML元素，特别是使用CSS来实现这一效果，而不是依赖于图像。在早期的Web开发中，实现圆角通常需要创建带有圆角的图像并将其作为背景，但这种方法效率...
html+css 实现图片右上角加删除叉、图片删除按钮
12-28
为了纪录下，以后可能用到，有需要的道友也可以用用。 不BB，上效果图先   以上就是效果图。 右上角的图片可自己换图片，图片素材我就不放上来了，我就上个代码，挺简单的css和js，初学者应该也看得明白 <!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd> <html xmlns=http://www.w3.org/1999/xh
html+css制作div标签增加右上角删除图标的示例代码
11-20
一、需求描述 在Div标签的右上角显示删除图标 二、实现方式 html、CSS 三、参考代码 <style> .container{ width:60px; height:60px; border: 1px dotted red; position:relative; } .content{ position:relative; top:20px; } .delete{ width:20px; height:20px; border-radius:6
css如何实现网页图片加删除叉、图片删除按钮
yunduanaoligei的博客
10-20 1636
今天分享下” css如何实现网页图片加删除叉、图片删除按钮“这篇文章，文中根据实例编码详细介绍，或许对大家的编程之路有着一定的参考空间与使用价值，需要的朋友接下来跟着云南仟龙Mark一起学习一下吧。 为了记录下，以后可能用到，有需要的编友也可以用用。 不多说，上效果图先 以上就是效果图。 右上角的图片可自己换图片，图片素材我就不放上来了，我就上个代码，挺简单的css和js，初学者应该也看得明白 ​​</​​​​pre​​​​><​​​​pre​​ ​​name​​​​=​​​​"code
css 制作关闭叉叉按钮
Khun_HWJ的博客
08-01 2751
<span class="closebtn"></span> .closebtn::before, .closebtn::after { content: ''; position: absolute; height: 2px; width: 50px; top: 50%; left: 50%; margin-top...
css设置图片右上删除按钮
大海无量的博客
01-12 6550
参考：https://blog.csdn.net/qq_33464127/article/details/77506461   &lt;!DOCTYPE html&gt; &lt;html&gt;     &lt;head&gt;         &lt;meta charset="UTF-8"&gt;         &lt;title&gt;&lt;/title&gt;       
css自定义删除（一个圆里有一个x）
weixin_43923808的博客
05-06 442
方法一 <div style="height: 80px; width: 80px; border: 1px solid black; position: relative;"> <span class="close"></span> </div> .close:hover{cursor:pointer;} .close { background:gray; color:white; border-radius: 12px; line-height: 2
菜单栏 “三” 变形为“X”css3过渡动画
09-27
本文主要介绍了菜单栏 “三” 变形为“X”css3过渡动画的实现方法。具有很好的参考价值，下面跟着小编一起来看下吧
纯CSS错误提示的图标动画效果
10-26
接下来，我们用CSS3的动画功能来增加动态效果。例如，可以制作一个旋转的动画： ```css @keyframes rotate-error { 0% { transform: rotate(0deg); } 50% { transform: rotate(180deg); } 100% { transform: ...
js实现div、图片圆角效果
08-09
超简单实用JS实现DIV、图片圆角效果 <!--[if lte IE 9]> <script type="text/javascript" src="DD_roundies_0.0.2a.js"></script> <script type="text/javascript"> DD_roundies.addRule('.websjy1', '5px 20px 3px 10px', true); DD_roundies.addRule('.websjy2,.websjy', '5px', true); DD_roundies.addRule('.websjy3', '200px', true); DD_roundies.addRule('.websjy4', '5px 5px 0 0', true); DD_roundies.addRule('.websjy div', '8px', true); </script> <![endif]--> <style> /*圆角处理 IE9以上及其它浏览器 */ .websjy div{-moz-border-radius:8px;-webkit-border-radius:8px;border-radius:8px;} .websjy1{-moz-border-radius:5px 20px 3px 10px;-webkit-border-radius:5px 20px 3px 10px;border-radius:5px 20px 3px 10px;} .websjy,.websjy2{-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;} .websjy3{-moz-border-radius:200px;-webkit-border-radius:200px;border-radius:200px;} .websjy4{-moz-border-radius:5px 5px 0 0;-webkit-border-radius:5px 5px 0 0;border-radius:5px 5px 0 0;} </style> <div style="border:1px solid #0099CC; width:200px; height:200px; background:#99FFFF; margin-bottom:10px;padding:20px; font-size:12px;" class="websjy1">DD_roundies.addRule('.websjy1', '5px 20px 3px 10px', true);</div> <h3>效果2：小圆角</h3>
CSS经典圆形按钮
08-14
CSS经典圆形按钮
Android中GridView点击右上角的叉号删除条目，贝塞尔曲线实现进度条
05-21
这个项目的重点在于两个功能：一是实现在GridView中点击右上角的叉号删除条目，二是利用贝塞尔曲线来创建动态的进度条效果。 首先，关于GridView的删除功能，通常我们会在每个GridView的项上添加一个可点击的图标，...
用css画出一个圆圈，里面有个叉号（不能用英文字母x）
歌谣的博客
01-26 1611
用css画出一个圆圈，里面有个叉号（不能用英文字母x） #cyc { width: 150px; height: 150px; margin: 100px auto; border-radius: 50%; border: 5px solid #000000; position: relative; } #cyc::before { content: "";
纯css实现叉号
weixin_34342992的博客
02-26 951
HMTL部分 &lt;a href="#" class="close"&gt;&lt;/a&gt; CSS部分 .close { position: absolute; right: 32px; top: 32px; width: 32px; height: 32px; } .close:before, .close:...
html消除图片点,html+css 实现图片右上角加删除叉、图片删除按钮
weixin_32279335的博客
06-03 630
为了纪录下，以后可能用到，有需要的道友也可以用用。不BB，上效果图先以上就是效果图。 右上角的图片可自己换图片，图片素材我就不放上来了，我就上个代码，挺简单的css和js，初学者应该也看得明白搞定。收工了。复制代码，替换下图片素材就直接能用了下班。走人--------------------------------------------------------------------------...
鼠标划过div右上角显示删除叉,瀑布流效果
人生若南柯一梦
01-07 1万+
鼠标划过div右上角显示删除叉,瀑布流效果
html+css 图片右上角加删除叉，图片删除
热门推荐
Jews
03-03 3万+
html+css 图片右上角加删除叉，图片删除
css实现半圆（上下左右半圆）
苏苏就是小苏苏的博客
05-11 1万+
1.右半圆 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> div{ background-color: aqua; } .circle{ width: 50px; height: 100px; border-radius: 0 50px 50px 0;
使用css和html设计一个叉号
最新发布
03-29
<!DOCTYPE html> <html> <head> <title>Designing a Cross using HTML and CSS</title> <style type="text/css"> .cross { width: 50px; height: 50px; border: 2px solid black; transform: rotate(45deg); position: relative; left: 22.5px; } .cross:before, .cross:after { content: ""; position: absolute; height: 2px; width: 100%; background-color: black; top: 50%; left: 0; transform: translateY(-50%); } .cross:before { transform: rotate(90deg); } </style> </head> <body> <div class="cross"></div> </body> </html>

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值