小编Pan*_*nic的帖子
4个圆点星形
我试图让这颗恒星在CSS中尽可能完美,这是我到目前为止所尝试的,但它是一个5角星,而且我想只有4分,我怎样才能让角落更加圆润呢？
#star-five {
margin: 50px 0;
position: relative;
display: block;
color: red;
width: 0px;
height: 0px;
border-right: 100px solid transparent;
border-bottom: 70px solid red;
border-left: 100px solid transparent;
-moz-transform: rotate(35deg);
-webkit-transform: rotate(35deg);
-ms-transform: rotate(35deg);
-o-transform: rotate(35deg);
}
#star-five:before {
border-bottom: 80px solid red;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
position: absolute;
height: 0;
width: 0;
top: -45px;
left: -65px;
display: block;
content: '';
-webkit-transform: rotate(-35deg);
-moz-transform: rotate(-35deg);
-ms-transform: rotate(-35deg);
-o-transform: rotate(-35deg);
}
#star-five:after {
position: absolute;
display: block; …推荐指数
解决办法
查看次数
CSS - 将文本阴影与文本轮廓相结合？
我正在努力做到这一点(不介意红色背景)
所以这就是我得到的东西,我可以在文本周围找到边框但是我不能将它与文本阴影结合起来......我怎么能绕过这个？也许这是:before :after陈述的东西？
h1, h2 {
font-family: Chicago;
font-size: 38px;
color: #FFFFFF;
letter-spacing: 1.73px;
/*
text-shadow: 0 0 5px #000000;
THIS WILL GIVE THE TEXT THE SHADOW*/
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
/*THIS WILL GIVE THE TEXT THE BORDER*/
/*How can I combine these two?*/
}<h1>CSS ZEN GARDEN</h1>
<h1>THE BEAUTY OF CSS DESIGN</h1>推荐指数
解决办法
查看次数
当元素 Y 悬停时移动元素 X？
a img {
width:3%;
text-decoration:none;
margin-left:10px;
}
a {
top: 10px;
left: 10px;
position: absolute;
color: #090909;
}<a href="#">View <img src="https://cdn1.iconfinder.com/data/icons/internet-28/48/31-512.png"> </a>如何使图像（箭头）5px向右移动，以便margin-left: 15px;在父标签<a>悬停时？如果没有 javascript 或 jquery，这可能吗？
推荐指数
解决办法
查看次数
HTML/CSS 单击 :active 或 :hover 时如何触发另一个元素？
在这里查看我的 JSfiddle ；现在，当您单击红色方块时，它会填充，但是当我单击红色方块时，如何使其填充绿色方块呢？这就像单击一个元素并使其在其他元素上激活一样？
我希望能够点击某个东西，然后其他东西需要做某事，而不是同一个元素，没有javascript，这可能吗？
.red {
border: solid 10px red;
width: 50px;
height: 50px;
}
.green {
border: solid 10px green;
width: 50px;
height: 50px;
}
.red:active {
background-color: red;
}<div class="red"></div>
<div class="green"></div>推荐指数
解决办法
查看次数
如何获得网格项和容器之间的网格间隙？
我怎样才能获得左侧间隙？如您所见，Box1 位于我使用过的左侧的“粘性”位置，grid-gap: 1em;但它仅适用于顶部底部和右侧？
/*Defining the font and pixels so we can work with em later*/
body {
font-family: 'Poppins', sans-serif;
font-size: 25px;
}
/*BG gradient layer + bg elements*/
.BG_gradient {
background-image: linear-gradient(-135deg, #FEE140 0%, #FA709A 100%);
/*Padding = 10vh top + 10vh bottom = 20vh*/
padding: 10vh 5vh 10vh 5vh;
/*Padding top and bottom is already 20vh combined so height left is 70vh*/
height: 80vh;
}
/* wrapper of the content*/
.wrapper {
/*Here we define the …推荐指数
解决办法
查看次数
::之前和::之后不起作用
我试图在用户屏幕上修复这两个对象.请注意,我只能使用CSS修改它,因此HTML无法编辑!,这是一个CSS zen园区示例(基于'90年代)我正在尝试(这意味着简而言之,你做了一个基于的设计一个固定的html文件,这样你就可以"炫耀"CSS的功能.)
你可以在这里找到一个实例. http://lucasdebelder.be/zengarden/index.html
我修复了顶部并使用以下语法.
body::before {
content: '';
position: fixed;
width: 100%;
height: 12.5%;
background: url(header_browser.svg);
background-repeat: no-repeat;
background-attachment: fixed;
z-index: 5000;
background-size: 100%;
}
然后我在身体上尝试了:: after语句.但这不起作用我怎样才能让底部图像(页脚)粘在底部？
body::after {
content: '';
position: fixed;
width: 100%;
height: 12.5%;
background: url(footer_browser.svg);
background-repeat: no-repeat;
background-attachment: fixed;
z-index: 5000;
background-size: 100%;
}
推荐指数
解决办法
查看次数
警告：include_once(../settings/settings.php)：无法打开流 - 但路径实际上是正确的？
Warning: include_once(../settings/settings.php): failed to open stream: No such file or directory in /Applications/MAMP/htdocs/Project/classes/user.class.php on line 2
Warning: include_once(): Failed opening '../settings/settings.php' for inclusion (include_path='.:/Applications/MAMP/bin/php/php7.2.1/lib/php') in /Applications/MAMP/htdocs/Snapshot/classes/user.class.php on line 2
但文件位置实际上是对的吗？它甚至为我提供了该路径的自动路径填充建议（可视代码插件）！
为什么会发生这种情况与/或第二条警告线有关？
因此，我尝试使用以下代码包含User.class.php文件中的settings.php文件。
include_once("../settings/settings.php");
../ -> 返回根文件夹
设置/ -> 进入设置文件夹
settings.php -> 应该找到所需的 .php 文件
推荐指数
解决办法
查看次数
在976px宽度后添加/删除CSS样式？
/*Fade in effect & one pager*/
.fullpage-wrapper {
width: 100%!important;
transform: none!important;
}
.fp-section {
width: 100%!important;
position: absolute;
left: 0;
top: 0;
visibility: hidden;
opacity: 0;
z-index: 0;
transition: all .7s ease-in-out;
}
.fp-section.active {
visibility: visible;
opacity: 1;
z-index: 1;
}
/* Remove transition when website is still loading */
body {display:none}
body[class*="fp-viewing-"] {display:block}
我想为移动用户删除低于976px宽度的这些给定样式.我怎样才能在javascript或jquery中实现这一点？还有可能让其他人开放吗？
if ($(window).width() < 967) {
*remove these styles but how?*
}
else {
*keep them/or do nothing*
}
推荐指数
解决办法
查看次数
标签 统计
css ×7
html ×6
css3 ×3
javascript ×2
jquery ×2
box-shadow ×1
css-grid ×1
css-position ×1
css-shapes ×1
fullpage.js ×1
hover ×1
include-path ×1
path ×1
php ×1
position ×1
svg ×1