矩形中间突上去一个半圆css

2024-10-22

CSS实现矩形按钮右边缘的中间有个往里凹的小半圆

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>test</title> <style> .btn { width: 100px; text-align: center; height: 50px; line-height: 50px; background: #000; color: #fff; position: relativ

一个纯CSS DIV天气动画图标【转扒的】

<p> </p> <style><!-- /* SUNNY */ .sunny { -webkit-animation: sunny 15s linear infinite; animation: sunny 15s linear infinite; background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 50%, rgba(255,255,255

SMACSS:一个关于CSS的最佳实践-3.Layout Rules

本篇笔者要介绍的是Layout Rules.看完本篇,大家将会知道Layout Rules的作用,以及哪些CSS应该归类为Layout Rules. 什么是Layout Rules? Layout Rules指的是用于布局的CSS.我们常常对布局和内容不加区分,总是将所有的CSS写在一块,从而降低了代码的可重用性.SMACSS将布局CSS抽象为Layout Rules,内容CSS抽象为Module Rules.一个module只需要关心自己长什么样就可以了,至于放在哪里,那是它的容器需要考虑的问

SMACSS:一个关于CSS的最佳实践-2.Base Rules

回顾在上一篇SMACSS:一个关于CSS的最佳实践-Overview中,讲到SMACSS将CSS Rules分为5个Categories: Base Layout Module State Theme 本篇我们将介绍Base Rules.你可以将所有Base Rules放在一个文件,比如 base.css :当然,也可以不这么做.区分Category的作用是帮助我们区分出不同功能的CSS,提高可重用性,可维护性. 哪些CSS属于Base Rules? Base Rules指的是所有元素的默认s

SMACSS:一个关于CSS的最佳实践-1.Overview

什么是SMACSS? SMACSS(发音"smacks"),全称Scalable and Modular Architecture for CSS.顾名思义,SMACSS是一个可扩展的,模块化的CSS架构.它不是一个CSS框架,而是一个指南,一个CSS设计的最佳实践.SMACSS旨在规范一种统一的CSS开发方式,以便开发人员能够更好的开发和维护CSS代码. 为什么要SMACSS? 对于软件系统来说,不管使用何种语言,何种编程思想,有几个要求总是永恒不变的:可重用,可扩展,可维护.对于小

一个标签的72变，打造一个纯CSS图标库

每次要用到图标的时候都会到 icono 去copypaste,但每次用到的时候尺寸都各不一样,总是要调整参数,巨烦.当然你可以会想到用zoom.scale来做缩放,但是这样的缩放会使得线宽也变粗了,不甚满意. 终于下定心思来改造一个可缩放的图标库.github先上:https://github.com/qieguo2016/iconoo,目前提供下载link标签引入和npm+webpack的引入方式,详见项目的readme.(喂,来个star!).上图: 关于改造,一开始的想法就是使用百分比尺寸

【转】一个DIV+CSS代码布局的简单导航条

原文地址:http://www.divcss5.com/shili/s731.shtml 简单的DIV CSS代码布局实现导航条一个蓝色主题的导航条布局案例,本CSS小实例,采用DIV CSS实现.同时不用图片做背景,直接使用背景色实现,鼠标经过悬停对应栏目名称是对应背景蓝色变深. 导航条部分效果截图一般导航条采用ul li列表布局,这里也不例外DIVCSS5实例也采用列表标签ul li+ CSS布局. 一.布局思维思考 - TOP 在实际DIV+CSS布局项目中,一般不会只使用一次

大神写的一个纯CSS圆角框，膜拜！（支持IE9一下的低版本）

留着提醒自己,底层才是最重要的,不要一直傻瓜的编程下去! <!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/xhtml"> <head> <m

Emmet：一个Html/Css快速编辑神器的插件

一.介绍:Emmet的前身是大名鼎鼎的Zen coding,如果你从事Web前端开发的话,对该插件一定不会陌生.它使用仿CSS选择器的语法来生成代码,大大提高了HTML/CSS代码编写的速度二.使用方法: 参考自:http://www.iteye.com/news/27580 一.快速编写HTML代码 1. 初始化 HTML文档需要包含一些固定的标签,比如<html>.<head>.<body>等,现在你只需要1秒钟就可以输入这些标签.比如输入“!”或“html:5

一个纯CSS实现的卡片翻转效果

先上代码 <div id="box"> <div class="front">正面</div> <div class="back">反面</div> </div> #box{ width:200px; height:200px; position:relative; perspective:; -webkit-perspective:; } #box div{ positio

Codeforces Round #587 (Div. 3) C题【判断两个矩形是否完全覆盖一个矩形问题】 {补题 [差点上分系列]}

C. White Sheet There is a white sheet of paper lying on a rectangle table. The sheet is a rectangle with its sides parallel to the sides of the table. If you will take a look from above and assume that the bottom left corner of the table has coordina

手把手教你打造一个纯CSS图标库

来,干了这碗安利写这篇文章的目的其实就是为了安利一下我的图标库:iconoo,所以,开门见山,star吧少年少妇们!(这样的我是不是应该要加个github互粉的团伙了?) 主题说完了,下面进入正题. 在web开发中,我们经常要用到一些小图标(加减勾叉等).通常做法就两种: 直接使用图片: 使用css/svg直接在浏览器中绘制图标. 方案1:由于图标图片比较多,而且体积很小,为了减少请求所以很多时候我们会用雪碧图这种技术来将图标拼凑在同一张图片里面.你也能想到,一堆图标的雪碧图,修改维护会相当麻

[原创]一个纯css实现兼容各种主流移动pc浏览器的时间轴

废话不多说 Demo 高度完全的自适应中心思想是table 和第二列行高的50%的上下绝对定位竖线第一次用codepen less完全不能用啊连node png之类的都是关键词会被去掉... 马克一个介绍Codepen简介我总在想无论是画画还是写代码思考这个东西的本身的结构组成原理(无论是时间轴还是人体) 比照着葫芦画瓢或者死记硬背一些东西重要的多嗯! 私心表达一下,桐谷健太赛高~\(≧▽≦)/~

多个css样式合并到一个“目录”css文件中

执行访问jsp后发现没有效果同样的代码,在html中效果对比如下: 具体原因:不清楚,暂时记着~~~在jsp中不支持@import这种css样式的引用

一个用css写出来的下拉菜单

1 <style> 2 /* css*/ 3 #body{ 4 float: left; 5 } 6 #xialakuang{ 7 background-color:#f9f9f9; 8 box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);/*设置下拉框的阴影*/ 9 display: none; 10 } 11 #body a{ 12 display: block; 13 padding:10px 15px; 14 color: #C4C4C4; 15

一张图一个表——CSS选择器总结

CSS选择器总结: (这些表是一张图片^_^) 看底部完整思维导图图片和表格的下载地址:https://download.csdn.net/download/denlnyyr/10597820 (我不想选择要积分币下载的,但那里最低必须选择1个积分……) 参考文献: https://baike.baidu.com/item/css%E9%80%89%E6%8B%A9%E5%99%A8/2819686 http://www.alloyteam.com/2016/05/summary-of-pse

分享一个纯css制作的动画化，在网页（手机）载入等的时候能够引用！

CSS代码例如以下: /* Custom Stylesheet */ body, html { margin: 0; -webkit-font-smoothing: antialiased; background: #68ABAD; text-align: center; } /* DEMO 1 */ .loader1 { margin: 0 auto; height: 20px; width: 20px; position:relative; -webkit-animation:spin 1.

【css】如何实现环形进度条

最近团队的童鞋接到了一个有关环形进度条的需求,想要还原一个native的沿环轨迹渐变进度条的效果,看到这个效果的时候,笔者陷入了沉思.. 环形进度条的效果,最先想到的就是使用CSS利用两个半圆的hack来模拟实现的: <div class='circle-container'> <div class="circle-item"> <div class="circle-left-wrap"> <div class="

Kotlin 第一弹：自定义 ViewGroup 实现流式标签控件

古人学问无遗力, 少壮工夫老始成.纸上得来终觉浅, 绝知此事要躬行. – 陆游 <冬夜读书示子聿> 上周 Google I/O 大会的召开,宣布了 Kotlin 语言正式成为了官方开发语言.一时间 Android 开发者的圈子炸开了锅,各种关于 Kotlin 的资料介绍也如雨后春笋不断的冒出. 大家都对这比较关心,我觉得最大的原因是,当初宣布 Android Studio 成为官方 IDE 后,很多开发者都还在坚守 Eclipse,但是现在来看,大部分都转为 Android Studio 开发

如何用 CSS 和 D3 创作一个无尽的六边形空间

效果预览按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/NBvrWL 可交互视频此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码. 请用 chrome, safari, edge 打开观看. https://scrimba.com/p/pEgDAM/czD3PhM 源代码下载每日前端实战系列的全部源代码请从 github 下载: https://github.com/comehope/f

纯css写一个大太阳的天气图标

效果效果图如下实现思路 div实现太阳的一条矩形光影 before伪元素制作另一条光影矩形,和已有的转变90° after伪元素画个圆实现太阳样式 dom结构用两个嵌套的div容器,父容器来控制图标显示的位置,子容器用来写太阳的一条光影矩形的样式. <div class="container"> <div class="sunny"></div> </div> css样式 1.定义父容器样式,控制图标位置,顺

矩形中间突上去一个半圆css

热门专题