我使用CSS3工具包生成代码,但是当我将它粘贴到我的编辑器中时,它不会返回形状,事实上,它不会返回任何屏幕上的内容。请有人找到我出错的地方。它与css文件的链接方式无关,因为它适用于我的其他css代码。我使用从App Store购买的CSS3 Toolkit生成的这个特定代码不起作用。
HTML:
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" type="text/css" href="indexcss.css">
<script type="text/javascript" href="dist/js/bootstrap.js"></script>
</head>
<body>
<div class="ToolKitStyle"></div>
</body>
</html>
CSS:
.ToolKitStyle{
background-color: #2EC0FE;
-moz-border-radius: 34px;
-webkit-border-radius: 34px;
border-radius: 34px;
-moz-box-shadow:inset 0px 4px 9px rgba(0,0,0,1);
-webkit-box-shadow:inset 0px 4px 9px rgba(0,0,0,1);
box-shadow:inset 0px 4px 9px rgba(0,0,0,1);
background-image: -o-linear-gradient(90deg , rgb(0,4,5) 0%, rgb(246,107,255) 100%);
background-image: -moz-linear-gradient(90deg , rgb(0,4,5) 0%, rgb(246,107,255) 100%);
background-image: -webkit-linear-gradient(90deg , rgb(0,4,5) 0%, rgb(246,107,255) 100%);
background-image: -ms-linear-gradient(90deg , rgb(0,4,5) 0%, rgb(246,107,255) 100%);
background-image: linear-gradient(90deg , rgb(0,4,5) 0%, rgb(246,107,255) 100%);
}
答案 0 :(得分:2)
您需要在css中添加宽度和高度
.ToolKitStyle{
background-color: #2EC0FE;
-moz-border-radius: 34px;
-webkit-border-radius: 34px;
border-radius: 34px;
-moz-box-shadow:inset 0px 4px 9px rgba(0,0,0,1);
-webkit-box-shadow:inset 0px 4px 9px rgba(0,0,0,1);
box-shadow:inset 0px 4px 9px rgba(0,0,0,1);
background-image: -o-linear-gradient(90deg , rgb(0,4,5) 0%, rgb(246,107,255) 100%);
background-image: -moz-linear-gradient(90deg , rgb(0,4,5) 0%, rgb(246,107,255) 100%);
background-image: -webkit-linear-gradient(90deg , rgb(0,4,5) 0%, rgb(246,107,255) 100%);
background-image: -ms-linear-gradient(90deg , rgb(0,4,5) 0%, rgb(246,107,255) 100%);
background-image: linear-gradient(90deg , rgb(0,4,5) 0%, rgb(246,107,255) 100%);
width:100px;
height:100px;
}
答案 1 :(得分:1)
您的JS没有正确链接。使用src
而不是href
<script type="text/javascript" src="dist/js/bootstrap.js"></script>
关于你的CSS问题 -
你没有任何内容,这就是你css看起来不起作用的原因。
这是高度,宽度定义
答案 2 :(得分:1)
您需要在内部放置或设置宽度/高度: http://jsfiddle.net/2qyEP/
.ToolKitStyle{
width: 200px;
height: 200px;
background-color: #2EC0FE;
-moz-border-radius: 34px;
-webkit-border-radius: 34px;
border-radius: 34px;
-moz-box-shadow:inset 0px 4px 9px rgba(0,0,0,1);
-webkit-box-shadow:inset 0px 4px 9px rgba(0,0,0,1);
box-shadow:inset 0px 4px 9px rgba(0,0,0,1);
background-image: -o-linear-gradient(90deg , rgb(0,4,5) 0%, rgb(246,107,255) 100%);
background-image: -moz-linear-gradient(90deg , rgb(0,4,5) 0%, rgb(246,107,255) 100%);
background-image: -webkit-linear-gradient(90deg , rgb(0,4,5) 0%, rgb(246,107,255) 100%);
background-image: -ms-linear-gradient(90deg , rgb(0,4,5) 0%, rgb(246,107,255) 100%);
background-image: linear-gradient(90deg , rgb(0,4,5) 0%, rgb(246,107,255) 100%);
}